Geek Answers Handbook

Youtube videos hosted in a transparent div are also transparent

I place an iframe iframe in the content area which has opacity 0.8

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

but the videos also show transparency, since you can see the background of the site through them. I tried changing wmode in every way, but that doesn't matter. This does not happen with Firefox, but it happens in Chrome

I'm new to all of this, so sorry if this is stupid! I really searched a lot before asking, but no luck.

+4
source share
3 answers

When you use the CSS opacity property for an element, all its children inherit from it, and you won't change anything to change it ...

... except that you can use transparent png background image or use rgba() or hsla() color values.

So the transparent black rgba will be background: rgba(0, 0, 0, .5); and hsla background-color: hsla(0, 0%, 0%, .5);

These properties are not inherited and therefore do not affect children, whatever they are :)

Here you can see three different CSS rules (not transparent png). Please note that the children of the last two are not affected :)

http://jsfiddle.net/SJK2H/

+3
source

In fact, how opacity works, it sets the opacity of an element and all its contents, not just the background. If you only need a translucent background, you should use something like transparent png as a background-image .

+2
source

I suggest using translucent .png as background instead of opacity. You can also use rgba as a background color, but it is not implemented in IE. Rgba is not supported in IE 8 and below (not sure about IE 9), so the desired effect can be achieved using filters. But sometimes it somehow makes the fonts look awful (removes anti-aliasing or something like that).

On the other hand, png 1 * 1px is really small and can be embedded in your css file.

+1
source

More articles:


All Articles