我想通过使用渐变创建一个氛围灯效果。
在css3中,你可以让一个渐变从以下方向移动 top to bottom
, bottom to top
, left to right
或从 right to left
你可以使用多种颜色,但只能用于一个方向。
我想把一张图片的4个区域结合起来,通过计算每个区域的平均或主要颜色,然后使用渐变为图片创建一个背景。
我想过使用多重渐变,但当你创建一个渐变时,它不会看起来很好。吖 还有一个 bd 并将两者放在图片后面即可。我在关键部位做了标记)。
你有什么Idea如何做到这一点吗?
EDIT: 我不想在渐变之间混合颜色,就像图中那样。我满足于所有颜色之间的平滑浮动。
EDIT2: 我在这里上传了一个问题的演示 http:/jsfiddle.netHJtnG
编辑3.我们已经了解到,这一点用CSS3无法实现,但也许用SVG可以实现。 我们了解到CSS3无法实现这个功能,但SVG可能可以实现。经过一些重新搜索,我找到了这张图片。
所以我想用一个像图上那样的彩色圆圈。
在2020年,考虑到新的渐变和遮罩,你有更多的可能性来实现你想要的东西。
使用 conic-gradient()
html {
min-height:100%;
background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}
使用 linear-gradient
和 mask
:
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);
}
使用 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>
你试过吗?颜色斯拉 它是免费的,你可以用它做很多事情。希望这可以帮助你。
如果我不明白这个问题,请原谅我,但我相信你想要的是一个矩形渐变。不幸的是SVG不支持这个。最接近的你可以得到的是有多个线性渐变,一些alpha渐渐消失,而后面是另一个线性渐变渐进。