透明的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呢?
在此先感謝
透明的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呢?
在此先感謝
子元素繼承不透明度。你可以做的是將<p>
定位在不透明div的外面,並設置一個負邊距以將其移動。
我經常遇到這個問題,通常這樣解決它。問題只有當你有動態內容和div必須擴大。
最簡單的方法就是風格不透明度/阿爾法父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
的方法。
總是聲明沒有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。
+1 JabbR帶我到這裏。 – 2013-08-27 15:20:02