JavaScript / jQuery渐变去饱和化十六进制颜色
JavaScript / jQuery渐变去饱和化十六进制颜色
提问于 2012-11-21 07:22:15
从(比如) #ff0011开始，我想为页面中的每个元素div设置背景色。
结果应该是这样的：
<div class="div-1"></div> // background-color:#ff0011;
<div class="div-2"></div> // background-color:#ff0011 -0.2% saturation;
<div class="div-3"></div> // background-color:#ff0011 -0.3% saturation;
<div class="div-4"></div> // background-color:#ff0011 -0.4% saturation;
<div class="div-5"></div> // background-color:#ff0011 -0.5% saturation;希望例子是清楚的，我真的不知道从哪里开始做这件事，所以任何链接教程都会非常感谢。
编辑:我说的是渐进式去饱和度颜色
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-11-21 07:38:54
使用CSS3高速缓存是一种选择吗？你将会有一个简单的(真实的)控件来计算较亮或较暗的颜色。https://developer.mozilla.org/en-US/docs/CSS/color_value#hsl()
它不能在IE8及更低版本上工作，但在现代浏览器中得到广泛支持。
Stack Overflow用户
发布于 2012-11-21 07:29:48
HTML：
<div class="div-1 shaded"></div> // background-color:#ff0011;
<div class="div-2 shaded"></div> // background-color:#ff0011 0.2% lighter;
<div class="div-3 shaded"></div> // background-color:#ff0011 0.3% lighter;
<div class="div-4 shaded"></div> // background-color:#ff0011 0.4% lighter;
<div class="div-5 shaded"></div> // background-color:#ff0011 0.5% lighter;JS：
$('.shaded').each(function(i){
$(this).css('opacity', (1 - i/10));
});这是Sushanth制作的a fiddle demonstrating this
Stack Overflow用户
发布于 2012-11-21 16:56:31
好了，我知道怎么做了，感谢你们每个人，但这是我需要的代码：
var i = 50;
$.each($('div'),function(){
$(this).css({'background-color':'hsl(145,37%,'+i+'%)'});
i++
});感谢@KKetch，他给了我css3 hsl()示例！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13483933
复制相关文章
相似问题
腾讯云开发者
