join: new@juude



get alerts for new articles






CLOSE WINDOW

join: new@juude



get alerts for new articles






CLOSE WINDOW

Color


RGBA vs Opacity



The Problem

Example ONE - Opacity
In 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 flower using opacity

TWO flowerusing rgba


Photoshop's Color Picker


Showing the blue used in both examples
color Picker showing RGB and hex number