In CSS once a parent element has its opacity set, the child elements inherit the same value.
This can render the child elements progressively more difficult to view.
But, now there are ways to prevent CSS child elements from adopting their parent’s setting.
When setting a CSS opacity on a div layer the child elements inherit this opacity value.
Ideally we want a parent element to be semi transparent with an opacity setting of, for example, 80% with the child elements bright and clear.
Here’s our example
<div style="background: #00d; opacity: 0.8; padding: 8px;"> <div style="background: #efefef; padding: 8px;"> <strong>Title within</strong> Content within div of opacity 80%. </div> </div>
Which renders as: Title within Content within div of opacity 80%.
If we use RGBA values instead, the opacity is set to the assigned element only and isn’t inherited to the child elements.
The rgba setting equivalent would be background:rgba(239,239,239,0.8)
RGBA values can be used in CSS to configure gradients, so manufactured bars and buttons will be OK.
However, we need to ensure that older browsers can serve the page as we wish.
To this end a background image is used, already created with a transparency level. I’m assuming that IE6 and its well known PNG file issues won’t be supported.
background:url(images/info-efefef-trnspnt-80.png);
background:rgba(239,239,239,0.8);
Note that the order of the CSS elements is important. The RGBA entry is to be positioned after the image. Otherwise the newer browser would select this setting over the RGBA one, which we wish it to use.
So there you are by changing the way colours are assigned we can set a transparency on a parent element which isn’t inherited by its child elements.
