RGBA vs Opacity (w3C)
The Problem with Opacity and Inheritance
Example ONE below
In the past there has been a problem with opacity and inheritance. When opacity was placed on an element all of its children (content) inherited the same opacity.
The Solution
Example TWO below
Color Chart
Instead of using the hex number for color use
the rgb property for color.
For example for white:
selector(
background-color: rgba(255, 255, 255,);
}
Then add the opacity (values are 0.0 - 1.0 ) to the end of the numbers in this I am using 0.5:
selector(
background-color: rgba(255, 255, 255, 0.5);
}
For older browsers that cannot read the rgb opacity you also need to include the color properties without the opacity.
#rgbBac{
color: #000;
background-color: rgb(255, 255, 255);
/*for browser that do not read rgba*/
background-color: rgba(255, 255, 255, 0.5);
}
ONE
The problem with using opacity is inheritance.
The content of the div inherits the same opacity, as you can see by this example
div#opacity{
background-color: #fff;
color: #000;
opacity: 0.6;
}
TWO
When you use rgba the content does not inherit the opacity. You need to include just the background (rgb) for older browsers that cannot read rgba
div#rgba{
color: #000;
background-color: rgb(255, 255, 255);
/*for browsers that do not read rgba*/
background-color: rgba(255, 255, 255, 0.5);
}
Color Chart
share / bookmark