CSS Opacityプロパティ

Question

こんにちは、divタグにCSS Opacityプロパティを使用していますが、うまくいきますが、問題が発生するのは、divタグにテキストを書き込んだり、フェードしたりするときです。私は、divのコンテンツを消すためにdivのバックカラーが必要です。私のコードは...

#fade div 
{ 
opacity:0.1; 
filter:alpha(opacity=10); /* For IE8 and earlier */ 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

#text in fade div 
{ 
font-weight:bold; 
color:#8A2BE2; 
} 

ありがとうございました！

Answer 1

rgba()または透明なPNGをバックグラウンドに使用する方がはるかに簡単です。

rgba(0, 0, 0, .1); 
rgba(0, 0, 0); //fallback 

Answer 2

もちろん、不透明度は子要素にも適用されます。できることは、マークアップを分割することです。

<div id='Div-With-Opacity-set'> 
</div> 
<div id='Child-Elements-for-the-above-div'> 
</div> 

マークアップが欲しいものに似ているように、マークアップを慎重に揃えます。

Answer 3

あなたはこのためにrgba()プロパティを使用することができます。このような

書き込み：

#fade div 
{ 
background-color: rgba(0,0,0,0.1); 
width:750px; 
height:150px; 
background-color:#FFFFFF; 
} 

IEのためにあなたがIE filter

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */  zoom: 1; 

あなたはhttp://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

ここからあなたのフィルタを生成することができます使用することができます

Answer 4

なぜあなたは再会しないのですか？次に不透明度を設定しますか？

#text in fade div 
{ 
    font-weight:bold; 
    color:#8A2BE2; 
    opacity:1; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
} 

Answer 5

1pxセミトランスペアレントgifを使用し、xとyだけ繰り返す。私が知る限り、半透明の背景を設定する最も簡単な方法です。

Answer 6

CSS3を使用しないと、おそらくdivを作成して別のdivをその上に配置しますが、内部には入れ子にしないでください。不透明度は、不透明度が設定された要素の内側のすべての要素までフィルタします。

右にdivを置き、余白に-750pxを指定した場合、1の不透明度を与えることができますが、その背後のdivは0.1の不透明度を持つ可能性があります良い。

#fade 
{ 
width:750px; 
height:150px; 
background-color: rgba(255,255,255,0.1); 
} 

を、ちょうど背景は0.1不透明度のようになります。

CSS3を使用すると、これを行うことができます。テキストは1のままです。

私が個人的に最も頻繁に行うことは、透明な背景を持つ小さな.pngを作成し、それを要素の背景として設定することです。 Photoshopでは、白い背景の不透明度を0.1に設定し、次に50×50の正方形を保存してから、ほぼ完全な透明度を得ました（IE6なし）。

Answer 7

http://jsfiddle.net/PWM5f/のようなもの、あなたは