使用CSS覆蓋透明div中的不透明文本

Question

我試圖讓透明div內的文字沒有不透明度，也就是說完全是黑色的：

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

這可能只與CSS有關嗎？

提前致謝

Answer 1

最簡單的方法是使用opacity / alpha為父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有一個專有的過濾器選項，但我擔心我不記得它是如何工作的。 所以我省略了任何描述/展示它的嘗試。 如果我能找到一個有用的參考，雖然我會在以后添加它。

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

Answer 2

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

我經常遇到這個問題，通常會像這樣解決它。 問題是只有當你有動態內容並且div必須擴展時。

Answer 3

背景是否由純色組成？ 如果是這樣，您還可以使用RGBa為div選擇透明背景顏色，而不是其子項繼承的div 。 閱讀RGBa瀏覽器支持以獲取更多信息，IE的解決方法和其他解決方案 。

如果div的背景不是實心，則可以使用透明PNG作為背景。 記得在IE6（和5.5）中使用AlphaImageLoader。