CSS overflow可視レンダー不透明要素の作成方法

Question

CSS overflow：visibleプロパティを使用すると、要素外のコンテンツをレンダリングできます ボックス。しかし、Firefoxは透明なボックスをオーバーフローさせたコンテンツを、透明な の背景でレンダリングするため、その背景には何が表示されるのですか？例えば：

 
<div style="background:red;height:30px;"> 
I want this to have<br> 
an opaque background. 
</div> 
<div style="background:white"> 
So that it does not show what is below. 
</div> 

不透明な背景でレンダリングさ最初のdivのすべてのコンテンツを作成する方法はありますか？このよう

Answer 1

：

HTML：

<div class="myDiv"> 
I want this to have<br> 
an opaque background. 
</div> 
<div class="mySecondDiv"> 
So that it does not show what is below. 
</div> 

そして、このCSS：これは、ほとんどのブラウザにしたい方の不透明度を使用して要素をレンダリングします

.myDiv 
{ 
background:red; 
height:30px; 
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ 
filter: alpha(opacity=75); /* IE lt 8 */ 
-ms-filter: "alpha(opacity=75)"; /* IE 8 */ 
-khtml-opacity: .75; /* Safari 1.x */ 
-moz-opacity: .75; /* FF lt 1.5, Netscape */ 
} 

.mySecondDiv 
{ 
background:white; 
} 

（私はわからないんだけど何人がこれを拾うだろうか）。

Answer 2

このは1つの解決策です。

• 相対的に位置付けされたdivを、高さ（つまり30px）を設定して作成します。
• 100％の幅/高さと不透明な背景画像（またはCSSで）で適所その内部絶対位置要素、

Here's the code with an example.