Question

从（比方说）＃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;

希望这个例子很清楚，我真的不知道从哪里开始这样做所以任何链接教程都会非常感激。

编辑：我正在谈论毕业的DESATURATE颜色

Answer 1

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

Answer 2

使用CSS3 hsl是一个选项吗？你可以轻松（和REAL）控制来计算更亮或更暗的颜色。 https://developer.mozilla.org/en-US/docs/CSS/color_value#hsl（）

它不适用于IE8及更低版本，但在现代浏览器中得到广泛支持。

Answer 3

好的，我发现了如何做到这一点，感谢大家，但这是我需要的代码：

var i = 50;
    $.each($('div'),function(){
    $(this).css({'background-color':'hsl(145,37%,'+i+'%)'});
    i++
    });

感谢@KKetch，他给了我css3 hsl（）示例！

Answer 4

您可以使用jQuery或Javascript来实现这一点..

使用Javascript

var elems = document.getElementsByTagName('div');

for(var i =0;i< elems.length ; i++){
      var op = 1 - (i/10);
      var fil = 100 - (i * 10);
      elems[i].style.opacity = op;
     elems[i].style.filter = "alpha(opacity=" + fil + ")";
}

HTML＆amp; CSS

<div class="div"></div>
<div class="div"></div> 
<div class="div"></div> 
<div class="div"></div> 
<div class="div"></div> 

.div
{
    background-color: #ff0011;
    width:100px;
    height:50px;
    border : 1px solid green;
}

<强> Check Fiddle

JavaScript / jQuery毕业去饱和HEX颜色

4 个答案: