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

CSS3 hsl の使用はオプションですか? 明るい色または暗い色を計算するための簡単な（そして実際の）制御が可能になります。 https://developer.mozilla.org/en-US/docs/CSS/color_value#hsl ()

IE8 以下では動作しませんが、最新のブラウザーで広くサポートされています。

于 2012-11-20T23:38:54.223 に答える
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 に答える
1

皆さんのおかげで、私はそれを行う方法を見つけましたが、これは私が必要としていたコードです:

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

css3 hsl() の例を教えてくれた @KKetch に感謝します!

于 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 に答える