6

CSS3でソリッドと透明色から動的に透明な背景を作ることは可能ですか? 例えば：

<div class="red trans1">
CONTENT
</div>

CSSで

.red {
background: #FF0000;
}
.trans1
background: rgba(255,255,255,0.5);
}

この場合、無地は透明度を完全にカバーします。もちろん、異なるプロパティ ( 、 など) を使用することを意味しbackgroundますbackground-color。

10 の単色があり、それぞれに 10 レベルの透明度を作成したいと考えています。色ごとに透明色を個別に作成すると、100 個の CSS クラスが必要になります。例えば：

.red1 {
.background: rgba(255,0,0,0.1);
}
.red2 {
.background: rgba(255,0,0,0.2);
}
.red3 {
.background: rgba(255,0,0,0.3);
}
....
.blue1 {
.background: rgba(0,0,255,0.1);
}
.blue2 {
.background: rgba(0,0,255,0.2);
}
.blue3 {
.background: rgba(0,0,255,0.3);
}

無地と透明な背景を動的に混合する方法を探しています。

4

2 に答える 2

7

純粋なCSS

はい、疑似要素をクリエイティブに使用することで、色と透明度の関連付けを解除できます。たとえば、このフィドルは次のコードを示しています:after(疑似要素に基づいてすべてを配置していることに注意してください)。

HTML

<div class="opBkg red op10">Red 10%</div>
<div class="opBkg red op50">Red 50%</div>
<div class="opBkg blue op80">Blue 80%</div>

関連CSS

.opBkg {
  position: relative;
}

.opBkg:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.red:after {
  background-color: red;
}
.blue:after {
  background-color: blue;
}
.op10:after {
  opacity: .1;  
}
.op50:after {
  opacity: .5;  
}
.op80:after {
  opacity: .8;  
}

不透明度のルールは 10 個ありますが、必要な色の数に関係なく、すべてopBkgを設定するための包括的なクラスがあります。

于 2013-01-10T15:59:08.470 に答える
3

10 個のルールを明示的に作成するか、SASS / Compassなどのプリプロセッサを使用する必要があります。

他の唯一のオプションは、透明度を示す何らかの属性に基づいて、JavaScript で動的に不透明度を設定することです。以下は、jQuery を使用してこれを実現します。

<div class="red" data-opacity=".75"></div>
<div class="red" data-opacity=".50"></div>
<div class="red" data-opacity=".25"></div>

$(".red").css("background-color", function (index, old) {
    var data = { 
        color: old.match(/[0-9, ]+/), 
        alpha: $(this).data("opacity") 
    };
    return "rgba(" + data.color + ", " + data.alpha + ")";
});

フィドル: http://jsfiddle.net/jonathansampson/WYDJL/

于 2013-01-10T15:44:47.650 に答える