覆蓋與CSS

透明的div不透明的文字我試圖做一個透明的div內的文本沒有透明度，又名全黑：覆蓋與CSS

<div style="opacity:0.6;background:#3cc;"> 
    <p style="background:#000;opacity:1">This text should be all black</p> 
</div>

這是可能僅與CSS呢？

在此先感謝

來源

2010-03-03 mager

+1 JabbR帶我到這裏。 – 2013-08-27 15:20:02

子元素繼承不透明度。你可以做的是將<p>定位在不透明div的外面，並設置一個負邊距以將其移動。

我經常遇到這個問題，通常這樣解決它。問題只有當你有動態內容和div必須擴大。

來源

2010-03-03 17:21:29 easwee

最簡單的方法就是風格不透明度/阿爾法父div的背景：

div { 
    background: #fff; /* for browsers that don't understand the following rgba rule */ 
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */ 
}

這是沒有，不過，與IE兼容。

對於IE> = 7的兼容性，可以使用：

div { 
    background-image: url('path/to/partially_transparent.png'); 
    background-position: 0 0; 
    background-repeat: repeat; 
}

我記得IE < 7有一個專有的過濾選項，但我怕我不記得它是如何工作的。所以我省略了描述/顯示它的任何嘗試。如果我可以找到一個有用的參考，但我會在稍後添加它。

正如easwee所指出的那樣，不透明度是由包含的元素繼承的，這就是爲什麼你不能覆蓋它，這也是爲什麼我更喜歡使用background-color/background-image的方法。

來源

2010-03-03 17:29:01

總是聲明沒有RGBa的回退，就像我在我的回答中鏈接到的文章中所述。 – 2010-03-03 17:33:25

@Marcel Korpel，是的，你是對的（編輯後備）。 – 2010-03-03 17:34:42

@ ricebowl：不會，這會觸發IE 6/7中的錯誤：http://css-tricks.com/ie-background-rgb-bug/ – 2010-03-03 17:37:22

背景是否由純色組成？如果是這樣，您還可以使用RGBa爲div選擇透明背景顏色，但不會由其子項繼承。有關更多信息，請參閱RGBa Browser Support，適用於IE和another solution的解決方法。

如果div的背景不穩定，則可以使用透明PNG作爲背景。請記住在IE6（和5.5）中使用AlphaImageLoader。

來源

2010-03-03 17:31:13

回答

相關問題