web-dev-qa-db-ja.com

モジュールの不透明度をテキストや画像ではなく背景にする

白い背景の不透明度の影響を受けないモジュールのテキストを作成するにはどうすればよいですか。

このページの例です。

http://www.webbmaster.com.au/web-programs/questdesign/index.php/services

このページでは、テキストと3つの画像が白い背景のみの不透明度の影響を受けないようにします。

1
Kyle

あなたのtemplate.cssで置き換えます:

.servpricing {
background: #FFF;
color: #000;
opacity: 0.3;
filter: alpha(opacity=20);
}

と:

.servpricing {
background: #fff; // Left as a fallback for older browsers
background: rgba(255,255,255,.3); // transparent white
color: #000;
}
3
Seth Warburton

このcssは透明な背景にのみ使用できます

背景:rgba(255、255、255、0.7);

不透明度のみの白の背景にするには、以下を使用します。

background: rgba(255, 255, 255, 0.3);
background: url(../images/transparent_white.png) repeat;

255, 255, 255は白のrgb値で、0.3は透明度のレベルです。 rgbaをサポートしていない古いブラウザ用のフォールバックイメージも含めました。それを保持したい場合は、もちろん透明なpngを作成する必要があります。

お役に立てれば

1
Lodder