如何将不透明度应用于父母而不影响孩子？

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浏览器的样式表，如果你有一个。