0

从（比如说）#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 颜色

4

4 回答 4

2

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演示的小提琴

于 2012-11-20T23:29:47.930 回答
2

使用 CSS3 hsl 是一种选择吗？您可以轻松（和真实）控制来计算较浅或较深的颜色。 https://developer.mozilla.org/en-US/docs/CSS/color_value#hsl ()

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

于 2012-11-20T23:38:54.223 回答
1

好的，我找到了如何做到这一点，感谢你们所有人，但这是我需要的代码：

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

感谢@KKetch，他给了我 css3 hsl() 示例！

于 2012-11-21T08:56:30.617 回答
0

您可以使用 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 和 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;
}​

检查小提琴

​</p>

于 2012-11-20T23:42:52.680 回答