CSS Opacity property is used to specify the transparency of the element. It can have values between 0.0 and 1.0.
|0||The element becomes fully transparent (Invisible).|
|Values between 0 to 1||The element becomes translucent. (Anything behind the element can be seen)|
|1||The element becomes fully opaque (solid).|
<p style="opacity:0.2;">I have opacity 0.2</p>
<p style="opacity:0.4;">I have opacity 0.4</p>
<p style="opacity:0.8;">I have opacity 0.8</p>
<p style="opacity:1;">I have opacity 1</p>
I have opacity 0.2
I have opacity 0.4
I have opacity 0.8
I have opacity 1
Things to remember
- The opacity of the parent element will be applied to all the child elements.
- Using RGBA values, you can keep the child elements opaque.
RGB stands for Red, Green and Blue. Instead of specifying colors using their names or hexadecimal values, you can use any integer between 0 to 255.
The A in RGBA stands for alpha channel. This is used to define the transparency of the color.
<p style="color:white;>I have opacity 0.6.
My background is transparent and the text is opaque.</p>
I have opacity 0.6. My background is transparent and the text is opaque.