web-dev-qa-db-ja.com

親コンテナの不透明度が50のときにテキストの不透明度を100に保つ方法

不透明度を50に設定したリストdivがあり、このdiv内に不透明度100のテキストを表示したいのですが、

これが私の意味です：

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

CSSは次のようになります。

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

試してみましたが、うまくいきません。

助けてください

よろしく

csshtmlopacity
28
Moksha

シンプルで互換性のあるソリューションは、すべてのopacityを削除して、次を使用することです。

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}
  • rgbaをサポートするブラウザは、2番目のbackground宣言をrgbaとともに使用します。
  • ブラウザ しない は2番目のbackground宣言を無視し、.pngを使用します。

.pngはIE6では機能しませんが、それは nlikely が問題になることです。そうであれば、 解決可能 です。

さらに別の方法をここで詳しく説明します。

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

18
thirtydot

これを行うには2つの方法があります。1つは、rgba(r,g,b,.5)を使用して、コンテナーの背景色を透明色に設定することです。ただし、これはCSS3であり、新しいブラウザーでのみサポートされます。

もう1つの方法は、0.5の不透明度で絶対配置されたdivをコンテナー内にドロップすることです。

<div class="backgroundOpacity">
    My Epic Content
</div>
<br/>
<div class="backgroundDiv">
    <div id="background"> </div>
    My Other Epic Content
</div>
.backgroundOpacity {
 background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
  position:relative;  
}
#background {
 position:absolute;
  top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
   opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

12
Thomas Shields
background-color: rgba(0,0,0,0.5);
5
Hello World

あなたはこのようにあなたの外側のdivを設定することができます

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

4
i4snow

これはトリックで行うことができ、とても簡単です。方法は次のとおりです。

テキストを透明なdivの外に出したい場合は、別のdivを位置として配置します。

1
Hadi