RGBa in CSS3
rgba is a new CSS property in CSS3. Chances are you have used RGB in CSS to set the colours of elements - be it the text, background or even border colour. Here is a simple rgb CSS example:
<style="text/css">
div.example {
background-color: rgb(255, 127, 0);
width:100px;
height:100px;
}
</style>div.example will displayed like so:
rgb allows you to set the colours of an element by specifying the red, green and blue components as demonstrated in the above example.
rgba adds an alpha chanel along side the red, green and blue. This enables us to set the opacity of an element using the syntax:
rgba(red, green, blue, alpha)
where red, green and blue are integer values between 0 and 255 and alpha is a number between 0.0 and 1.0
The following CSS and HTML shows this in action:
<div style="background-color:rgba(255, 127, 0, 1.0)"></div>
<div style="background-color:rgba(255, 127, 0, 0.8)"></div>
<div style="background-color:rgba(255, 127, 0, 0.6)"></div>
<div style="background-color:rgba(255, 127, 0, 0.4)"></div>
<div style="background-color:rgba(255, 127, 0, 0.2)"></div>
<div style="background-color:rgba(255, 127, 0, 0.0)"></div>Difference between opacity and rgba
There is another CSS property you may have used called opacity which like rgba can be used to set the opacity of an element. So is there difference? There is a key difference and that is rgba is not inherited by child elements whereas opacity is:
Example
Example
In the example above the div on the left uses rgba whilst that on the right uses rgb together with opacity. The paragraph in the left does not inherit the opacity value whilst that on the right does.
Browser support
At the time of writing the rgba property is supported by the Presto, Webkit and Gecko layout engines which power the FireFox, Safari, Opera and Chrome browsers amongst others. Currently no IE version supports rgba.