CSS ‘transparent’ Keyword
transparent keyword can be used to make an HTML element transparent. For example, to set a transparent background.
transparent keyword can be used anywhere a color value is accepted. This allows you to set items to transparent, so that any background element will show through.
For example, to set a transparent background, do this:
transparent is the initial value for the
background-color property, so you often won't need to specify this. However, sometimes you do need to explicitly set background to transparent.
For example, you will need to set an element to transparent if its background color is currently an opaque color (i.e. not transparent).
The following code demonstrates what I mean.
Doing this will make the background of all
article elements beige. But if they've got the
.glass class applied, their background will be transparent.
Here's a working example with a background pattern, to demonstrate the transparency.
transparent keyword is the equivalent of
rgba(0,0,0,0) which is its computed value.
So you can also use
rgba(0,0,0,0) to achieve the same effect.
History of the
transparent keyword was first introduced in CSS1. However, CSS1 allowed it to be used for the
background-color property only.
CSS2 allowed it to also be used on the
CSS3 extended it further to allow the
transparent keyword to be used with all properties that accept a color value.