RMTWeb

View Original

CSS set background transparency stop children inheriting

css-logo-w3corg-7587501Its a really major problem, you want the background of one particular div or element to be semi-transparent, but if you set

background-color:#ffffff;opacity:0.8;

then the child elements (things inside the parent div you have set the transparency on) also have the same level of transparency.Thankfully with CSS 3 there is an easy fix for this that works in all major browsers:

background-color: rgba(255,255,255,0.8);

This then only sets transparency on the actual div that has this style applied to it, and not its children.One problem with this approach is that it is not completely backwards compatible (thanks to @AlanStirling for pointing this out along with a link to a solution)http://css-tricks.com/rgba-browser-support/