web-dev-qa-db-ja.com

html / cssで白い不透明効果を達成する

別々の画像を準備することなく、クロスブラウザ互換の方法でこの効果を達成する方法はありますか？

基本的に、テキストが置かれるフレームには、不透明度が50％の白いオーバーレイがあります。背景に加えて他の画像を作成する必要がないソリューションが欲しいのですが、それが可能かどうかわかりません！

alt text

htmlcssopacity
32
Jack

RGBAを試してください。

div { background-color: rgba(255, 255, 255, 0.5); }

いつものように、これはこれまでに書かれたすべてのブラウザーで機能するわけではありません。

68
Bobby Jack

ブラウザのサポートのためにrgbaを使用できず、半透明の白いPNGを含めたくない場合は、2つの配置された要素を作成する必要があります。 1つは不透明な白いボックス用、もう1つは塗りつぶされたテキスト用です。

body { background: red; }

.box { position: relative; z-index: 1; }
.box .back {
    position: absolute; z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }

body.browser-ie8 .box .back { filter: alpha(opacity=75); }
<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
    <div class="box">
        <div class="back"></div>
        <div class="text">
            Lorem ipsum dolor sit amet blah blah boogley woogley oo.
        </div>
    </div>
</body>
3
bobince