codescracker


css

CSS Color RGBA Value Format



« Previous Tutorial Next Tutorial »


CSS RGBA Value Format

The RGBA format takes four arguments, in which first three are same as in the RGB format, while the fourth argument is the alpha channel. This argument specifies the transparency or opacity level of the specified color. It takes a number between 0 and 1 as a value. The main advantage of using RGBA over the opacity property is that using RGBA the transparency is not applied to child elements.

Example

The following code fragment shows the use of RGBA format :

h1{ background-color: rgba(153, 134, 117, 0.0);}
h2{ background-color: rgba(153, 134, 117, 0.2);}
h3{ background-color: rgba(153, 134, 117, 0.4);}
h4{ background-color: rgba(153, 134, 117, 0.6);}
h5{ background-color: rgba(153, 134, 117, 0.8);}
h6{ background-color: rgba(153, 134, 117, 1.0);}

You should note that if the opacity or alpha value is set to 1.0, the respective element is completely visible (opaque); however, if the opacity or alpha value is set to 0.0, the element is completely invisible.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test