1

半透明の背景を作ることはできますが、1 つの要素に複数の半透明の背景を追加する方法はありますか? それとも、自分で値を掛ける必要がありますか (また、自分で値を掛ける必要がある場合は、どの式を提案しますか?)、背景色を 1 つ設定する必要がありますか?

複数の背景画像を設定したり……

4

3 に答える 3

4

1 つの要素に設定できる背景色は 1 つだけです。

必要な値を組み合わせて計算した値を css ファイルに入れることをお勧めしますが、それがうまくいかない場合は、ネストされた要素のセットを作成し、それぞれに背景色を設定するという別のオプションがあります。例えば

<div class="background1">
    <div class="background2">
        stuff
    </div>
</div>
于 2012-07-26T14:58:59.773 に答える
2

はい、CSS3 で

CSS3gradient呼び出しを使用して「非グラデーション」の単色を作成すると、複数の背景色に透過性を持たせることができます。透明度 50% の 2 つの単色を重ねたものを次に示します (フィドルを参照)。

.layeredBkg {
    background-image: -o-linear-gradient(left , rgba(46,227,255.5) 0%, rgba(46,227,255,.5) 100%), -o-linear-gradient(left , rgba(196,48,255.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -moz-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -moz-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -webkit-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: -webkit-gradient(linear,left top, right top, color-stop(0, rgba(46,227,255,.5)), color-stop(1, rgba(46,227,255,.5))), -webkit-gradient(linear,left top, right top, color-stop(0, rgba(196,48,255,.5)), color-stop(1, rgba(196,48,255,.5)));
    background-image: -ms-linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), -ms-linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    background-image: linear-gradient(left , rgba(46,227,255,.5) 0%, rgba(46,227,255,.5) 100%), linear-gradient(left , rgba(196,48,255,.5) 0%, rgba(196,48,255,.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#882ee3ff', endColorstr='#882ee3ff'), progid:DXImageTransform.Microsoft.gradient(startColorstr='#88c430ff', endColorstr='#88c430ff');
}
于 2012-07-26T15:59:45.263 に答える
0

複数の背景画像を持つことができるので、無地の画像を背景として使用し、それらにアルファを適用することを考えます。

于 2012-07-26T15:31:36.117 に答える