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
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.
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.
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 isrgba(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.
0 Comments
Good day precious one, We love you more than anything.