18 
<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

上記の例では、の不透明度はdiv#foo子要素に継承されているため、テキストはほとんど読めなくなります。継承されていると言うのは間違っていると思います。不透明度は親divに適用され、子はその一部です。したがって、子要素に対してそれをオーバーライドしようとしても、技術的には不透明であるため機能しません。

私は通常、このような場合にalpha pngの背景画像を使用しますが、今日は、コンテンツに影響を与えずにdivの背景を半透明にするより良い方法があるかどうか疑問に思っています。

4

3 に答える 3

39

rgba（）を使用できます。

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

古いInternetExplorerで機能させるには、CSSPIEを使用します。いくつかの制限がありますが、それらは下位互換性のある方法で処理されます。RGB値は正しくレンダリングされ、不透明度は無視されます。

于 2010-04-01T15:23:25.800 に答える
7

最良の方法は、透明なpngを背景に設定することです。

于 2010-12-15T14:10:42.903 に答える
5

不透明度を使用する場合は、それらを別々のDIVに配置してから、並べる必要があります。背景のDIVの不透明度は低くなり、前景のDIVの不透明度は100％になります。

于 2010-04-01T15:34:07.070 に答える