Color
RGBA vs Opacity
The Problem
Example ONE - OpacityIn the past there has been a problem with opacity and inheritance. When opacity was a property for an element all of its content inherited the same opacity as you can see in the first example.
For both examples I am using the same color blue with an opacity of .6. For the first example I am using the hex number #336699.
selector{
background-color: #369;
color: #fff;
opacity: 0.6;
}
The Solution
Example TWO - rgba
Instead of using the hex number for the second example I am using the rgb numbers.
selector(
background-color: rgba(51, 102, 153);
}
Then add the opacity (values are 0.0 - 1.0 ) to the end of the numbers. In both examples I am using 0.6.
selector(
background-color: rgba(51, 102, 153, 0.6);
}
For older browsers that cannot read the rgba you also need to include the color properties without the opacity.
selector{
background-color: rgb(51, 102, 153);
background-color: rgba(51, 102, 153, 0.6);
}
ONE
using opacity
TWO
using rgba Photoshop's Color Picker
Showing the blue used in both examples
