CSS Tutorial Lesson 11: Opacity

We have learned how to add colours to a webpage using RGB codes, HEX codes and colour names. However, using the aforementioned colour systems only create solid colours for an element, in other words, they have 100% percent opacity. In this lesson, we shall learn how to control the opacity of a colour so that the colour displayed by an element can have a certain degree of transparency. There are two ways we can specify the opacity of an element, first is by using opacity property and the other one is by using the RGBA codes

11.1 The Opacity Property

In CSS, opacity is expressed in terms of decimal values ranging from 0 to 1, where 0 is 100% transparent, 0.5 is 50% opague( or 50% transparent) and 1 is 100% opague( or zero transparency).

The syntax of opacity is opacity:n; where n has values ranging from 0 to 1.

For example,
<div style=”background-color: red; opacity: 0.5;position: static; width: 50px; height:50px;left:400px;top:1150px;”></div>
creates a box with red background of 50% opacity.

<div style=”background-color: red; opacity: 0.7; position: static; width: 50px; height: 50px; left: 400px; top: 1300px;”></div>
creates a box with red background of 70% opacity.

The following example shows two sets of overlapping boxes, the cyan box on left has 100% opacity while the blue box has 0.3 opacity. Boxes on right both have solid colours.

11.2 The RGBA Codes

RGBA codes uses an a value to sepcify the opacity of a colour. The syntax is
rgba(r,g,b,a), where a indicates degree of opacity with values ranging from 0 to 1.
For example

creates a box with red background of 50% opacity.

creates a box with red background of 70% opacity.