Marusya's School Notes

Opacity

The CSS3 opacity property sets the opacity for a specified RGB value. Like the alpha channels, the opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

HTML file:	Displayed by browser:
<body> <h3>Varied opacity parameters on the RGB value for red:</h3> <div style="background:rgb(255, 0, 0);opacity:0.0;">rgb(255, 0, 0);opacity:0.0;</div> <div style="background:rgb(255, 0, 0);opacity:0.1;">rgb(255, 0, 0);opacity:0.1;</div> <div style="background:rgb(255, 0, 0);opacity:0.2;">rgb(255, 0, 0);opacity:0.2;</div> <div style="background:rgb(255, 0, 0);opacity:0.3;">rgb(255, 0, 0);opacity:0.3;</div> <div style="background:rgb(255, 0, 0);opacity:0.4;">rgb(255, 0, 0);opacity:0.4;</div> <div style="background:rgb(255, 0, 0);opacity:0.5;">rgb(255, 0, 0);opacity:0.5;</div> <div style="background:rgb(255, 0, 0);opacity:0.6;">rgb(255, 0, 0);opacity:0.6;</div> <div style="background:rgb(255, 0, 0);opacity:0.7;">rgb(255, 0, 0);opacity:0.7;</div> <div style="background:rgb(255, 0, 0);opacity:0.8;">rgb(255, 0, 0);opacity:0.8;</div> <div style="background:rgb(255, 0, 0);opacity:0.9;">rgb(255, 0, 0);opacity:0.9;</div> <div style="background:rgb(255, 0, 0);opacity:1.0;">rgb(255, 0, 0);opacity:1.0;</div> <h3>Below are different RGB values with 0.6 opacity:</h3> <div style="background-color:rgb(0,0,0);opacity:0.6;color:white;">This is rgb (0,0,0): Black with opacity = 0.6</div> <div style="background-color:rgb(255,0,0);opacity:0.6;">This is rgb (255,0,0): Red with opacity = 0.6</div> <div style="background-color:rgb(0,255,0);opacity:0.6;">This is rgb (0,255,0): Green with opacity = 0.6</div> <div style="background-color:rgb(0,0,255);opacity:0.6;">This is rgb (0,0,255): Blue with opacity = 0.6</div> <div style="background-color:rgb(192,192,192);opacity:0.6;">This is rgb (192,192,192): Grey with opacity = 0.6</div> <div style="background-color:rgb(255,255,0);opacity:0.6;">This is rgb (255,255,0): Yellow with opacity = 0.6</div> <div style="background-color:rgb(255,0,255);opacity:0.6;">This is rgb (255,0,255): Cerise with opacity = 0.6</div> <div style="background-color:rgb(255,255,255);opacity:0.6;">This is rgb (255,255,255): White with opacity = 0.6</div> </body>	Varied opacity parameters on the RGB value for red: rgb(255, 0, 0);opacity:0.0; rgb(255, 0, 0);opacity:0.1; rgb(255, 0, 0);opacity:0.2; rgb(255, 0, 0);opacity:0.3; rgb(255, 0, 0);opacity:0.4; rgb(255, 0, 0);opacity:0.5; rgb(255, 0, 0);opacity:0.6; rgb(255, 0, 0);opacity:0.7; rgb(255, 0, 0);opacity:0.8; rgb(255, 0, 0);opacity:0.9; rgb(255, 0, 0);opacity:1.0; Below are different RGB values with 0.6 opacity: This is rgb (0,0,0): Black with opacity = 0.6 This is rgb (255,0,0): Red with opacity = 0.6 This is rgb (0,255,0): Green with opacity = 0.6 This is rgb (0,0,255): Blue with opacity = 0.6 This is rgb (192,192,192): Grey with opacity = 0.6 This is rgb (255,255,0): Yellow with opacity = 0.6 This is rgb (255,0,255): Cerise with opacity = 0.6 This is rgb (255,255,255): White with opacity = 0.6

HTML file:

Displayed by browser:

<body>
<h3>Varied opacity parameters on the RGB value for red:</h3>

<div style="background:rgb(255, 0, 0);opacity:0.0;">rgb(255, 0, 0);opacity:0.0;</div>
<div style="background:rgb(255, 0, 0);opacity:0.1;">rgb(255, 0, 0);opacity:0.1;</div>
<div style="background:rgb(255, 0, 0);opacity:0.2;">rgb(255, 0, 0);opacity:0.2;</div>
<div style="background:rgb(255, 0, 0);opacity:0.3;">rgb(255, 0, 0);opacity:0.3;</div>
<div style="background:rgb(255, 0, 0);opacity:0.4;">rgb(255, 0, 0);opacity:0.4;</div>
<div style="background:rgb(255, 0, 0);opacity:0.5;">rgb(255, 0, 0);opacity:0.5;</div>
<div style="background:rgb(255, 0, 0);opacity:0.6;">rgb(255, 0, 0);opacity:0.6;</div>
<div style="background:rgb(255, 0, 0);opacity:0.7;">rgb(255, 0, 0);opacity:0.7;</div>
<div style="background:rgb(255, 0, 0);opacity:0.8;">rgb(255, 0, 0);opacity:0.8;</div>
<div style="background:rgb(255, 0, 0);opacity:0.9;">rgb(255, 0, 0);opacity:0.9;</div>
<div style="background:rgb(255, 0, 0);opacity:1.0;">rgb(255, 0, 0);opacity:1.0;</div>

<h3>Below are different RGB values with 0.6 opacity:</h3>

<div style="background-color:rgb(0,0,0);opacity:0.6;color:white;">This is rgb (0,0,0): Black with opacity = 0.6</div>
<div style="background-color:rgb(255,0,0);opacity:0.6;">This is rgb (255,0,0): Red with opacity = 0.6</div>
<div style="background-color:rgb(0,255,0);opacity:0.6;">This is rgb (0,255,0): Green with opacity = 0.6</div>
<div style="background-color:rgb(0,0,255);opacity:0.6;">This is rgb (0,0,255): Blue with opacity = 0.6</div>
<div style="background-color:rgb(192,192,192);opacity:0.6;">This is rgb (192,192,192): Grey with opacity = 0.6</div>
<div style="background-color:rgb(255,255,0);opacity:0.6;">This is rgb (255,255,0): Yellow with opacity = 0.6</div>
<div style="background-color:rgb(255,0,255);opacity:0.6;">This is rgb (255,0,255): Cerise with opacity = 0.6</div>
<div style="background-color:rgb(255,255,255);opacity:0.6;">This is rgb (255,255,255): White with opacity = 0.6</div>
</body>

Varied opacity parameters on the RGB value for red:

rgb(255, 0, 0);opacity:0.0;

rgb(255, 0, 0);opacity:0.1;

rgb(255, 0, 0);opacity:0.2;

rgb(255, 0, 0);opacity:0.3;

rgb(255, 0, 0);opacity:0.4;

rgb(255, 0, 0);opacity:0.5;

rgb(255, 0, 0);opacity:0.6;

rgb(255, 0, 0);opacity:0.7;

rgb(255, 0, 0);opacity:0.8;

rgb(255, 0, 0);opacity:0.9;

rgb(255, 0, 0);opacity:1.0;

Below are different RGB values with 0.6 opacity:

This is rgb (0,0,0): Black with opacity = 0.6

This is rgb (255,0,0): Red with opacity = 0.6

This is rgb (0,255,0): Green with opacity = 0.6

This is rgb (0,0,255): Blue with opacity = 0.6

This is rgb (192,192,192): Grey with opacity = 0.6

This is rgb (255,255,0): Yellow with opacity = 0.6

This is rgb (255,0,255): Cerise with opacity = 0.6

This is rgb (255,255,255): White with opacity = 0.6

Notice that the text is also opaque to the same intensity. In the red section, both the text and background of the top line has an opacity = 0.0, making it fully transparent.