放置在透明div中的Youtube视频也是透明的

Question

我将youtube iframe放置在具有0.8不透明度的内容框中

opacity: .8;
filter: alpha(opacity=80);

但视频也显示为透明，因为您可以通过它们看到网站的背景。我尝试过尽可能地改变wmode，但没有任何区别。 Firefox不会发生这种情况，但在Chrome中也是如此。

Answer 1

当你在一个元素上使用CSS属性opacity时，它的所有子元素都将继承它，你无需改变它......

...除了您可以使用透明的png背景图片，或使用rgba()或hsla()颜色值。

如此透明的黑色rgba将是background: rgba(0, 0, 0, .5);和hsla background-color: hsla(0, 0%, 0%, .5);

这些属性不会被继承，因此不会影响孩子，无论他们是什么：）

在这里，您可以看到正在使用的三种不同的CSS规则（不是透明的png）。请注意，最后两个的子元素不受影响：）

http://jsfiddle.net/SJK2H/

Answer 2

实际上，opacity应该如何工作，它设置了元素及其所有内容的不透明度，而不仅仅是背景。如果你只想要一个半透明的背景，你应该使用透明的png作为background-image。

Answer 3

我建议使用半透明.png作为背景而不是不透明度。 您也可以使用rgba作为背景颜色，但它不是在IE中实现的。 IE 8及更低版本不支持Rgba（对于IE 9不确定），因此可以使用过滤器来实现所需的效果。 但它有时会以某种方式使字体看起来很糟糕（消除那种反锯齿或smth。）。

另一方面，1 * 1px的png非常小，可以内置到你的css文件中。