8

我想通过使用渐变来创建流光溢彩的效果。

在 css3 中,您可以让渐变从top to bottom、或 from移动bottom to top,并且可以使用多种颜色。但只针对一个方向。left to rightright to left

我想通过计算每个区域的平均或主色来组合图像的 4 个区域,然后使用渐变为图像创建背景。

在此处输入图像描述

我考虑过使用多重渐变,但是当您创建渐变ac和另一个bd并将两者都放在图片后面时,它看起来并不好。(我标记了关键区域。)。

你知道如何做到这一点吗?

编辑:我不想在渐变之间混合颜色,就像在图片中一样。我对所有颜色之间的平滑浮动感到满意。

EDIT2:我在这里上传了我的问题的演示:http: //jsfiddle.net/HJtnG/

Edit3:我们知道这不能用 CSS3 来完成,但可能用 SVG。经过一番搜索,我发现了这张照片:

在此处输入图像描述

所以我会选择一个像图片上的彩色圆圈。

4

3 回答 3

4

在 2020 年,考虑到新的渐变和蒙版,您有更多的可能性来实现您想要的。

使用conic-gradient()

html {
  min-height:100%;
  background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}

在此处输入图像描述

使用linear-gradientmask

html {
  min-height:100%;
  background:linear-gradient(to right,red,blue);
}
html::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,green,gold);
  -webkit-mask:linear-gradient(#fff,transparent);
          mask:linear-gradient(#fff,transparent);
}

多色 CSS 线性渐变

radial-gradient_mask

html {
  background:radial-gradient(120% 120%,red 30%,#000);
}
html:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,blue 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
.full {
  height:100vh;
  position:relative;
  background:radial-gradient(120% 120%,green 30%,#000);
  -webkit-mask:linear-gradient(to right, transparent,#fff);
          mask:linear-gradient(to right, transparent,#fff);
}
.full:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,gold 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
body {
  margin:0;
}
<div class="full"></div>

带遮罩的 CSS 径向渐变

于 2020-05-18T12:25:56.870 回答
0

如果我不明白这个问题,请原谅我,但我相信你想要的是一个矩形渐变。不幸的是 SVG 不支持这一点。你能得到的最接近的方法是有多个线性渐变,其中一些 alpha 淡出,而后面是另一个线性渐变淡入。

于 2015-03-05T20:25:50.957 回答
-1

您是否尝试过免费的colorzilla,您可以用它做很多事情。希望这能有所帮助。

于 2013-07-11T13:52:31.413 回答