如何將不透明度應用於父母而不影響孩子？

Question

我有這個樣本：http://jsfiddle.net/funguy/jKfeQ/

不要被弄糊塗，它的東西在這裏，但略顯可見。我想將不透明度僅應用於.postmorewrapper1，但不應用於.read-more1。

有關我如何達到此目的的任何建議？謝謝！

Answer 1

你不能，你需要讓他們的兄弟姐妹和他們的位置來模仿父母/孩子。

Answer 2

正如AlienWebguy所說，你不能用像不透明度這樣的CSS屬性來做，而不會影響孩子。

如果你真的需要改變父母的不透明度而不影響它的孩子，最好的作弊將交換父母的背景圖像爲png透明，這樣孩子不會受到影響父母的不透明度似乎改變了。

Answer 3

問題是opacity屬性適用於所有子元素。另一種方法是在將背景色指定爲.postmorewrapper1而不是十六進制值時使用rgba。因此，而不是這樣的：

background: #FCFCFC; 
opacity: 0.4; 

試試這個：

background: rgba(252, 252, 252, 0.4) 

有一件事要記住使用這種技術雖然是IE 8版本及以下不支持RGBA（它在V9加入）。有幾個選項來解決這個問題：

1. 使用的IE瀏覽器過濾器（這可能會對性能產生影響，如果過度使用）
2. 使用IE版本8和下半透明的PNG圖像（其少維護）

的選項1的CSS是：

background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC)"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FCFCFC,endColorstr=#66FCFCFC); /* IE6 & 7 */ 
zoom: 1; 

你會提出，在你的IE瀏覽器的樣式表，如果你有一個。