如何使CSS溢出可見呈現不透明元素

CSS overflow：visible屬性允許呈現元素框外的內容。但是，Firefox使用透明的背景渲染盒子溢出的內容，從而可以看到它下面的內容。例如： -如何使CSS溢出可見呈現不透明元素

 
<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的所有內容與不透明的背景被渲染的一種方式？

來源

2010-11-23 Angelo Borsotti

像這樣：

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; 
}

，這會使得你想在大多數瀏覽器哪個不透明度的元素（我不知道有多少人會選擇這個）。

來源

2010-11-23 09:16:50 Kyle

我已經嘗試過了，但一塊的第一個div的（即第二行）仍然在Firefox的透明背景下呈現在第二個div的頂部，而在IE中，第一個div呈現在第二個之上，沒有任何重疊。 – 2010-11-24 19:42:23

是的，按照這jsfiddle：http://jsfiddle.net/tchalvakspam/JUndB/它不起作用（鉻22）。 – Kzqai 2012-10-17 18:41:05

這個是一個解決方案。

創建一個相對定位的div，設置高度（即30px）。
放置在其內部的絕對定位的元素，以100％的寬度/高度和不透明的背景圖像（或CSS）

Here's the code with an example.

來源

2010-11-23 09:29:04 Marko

如何使CSS溢出可見呈現不透明元素

回答

相關問題