Transparent Background

Using a Transparent Background Color

One of the innovations that comes with CSS3 is that we can apply transparent-translucent colors to the background. There are several ways to do this.

Opacity Property

After specifying the background color with background-color, we can specify the transparency value using the opacity property. Opacity value can be between 0 and 1. The closer the value we give to 0, the greater the transparency. The decimal part is separated by a period.

RGBA Color System

The last of the 4 values ​​used to specify the color in the rgba(red, green, blue, alpha) system sets the opacity. The first three values ​​are used to adjust the amount of red, green, and blue hues, respectively . 

The color values ​​range from 0-255, while the alpha value is between 0 and 1.

background-color: rgba(200, 0, 0, 0.3);

In this example, the transparency value is set to 0.3.

Hsla Color System

In the hsla(hue, saturation, lightness, alpha) system, the last value is alpha, that is, the transparency value. 

Hue value is between 0 and 360, it adjusts the color,

Saturation is between 0% and 100%, adjusting the color saturation,

Lightness is between 0% and 100% and adjusts the brightness.

Alpha value is a value between 0 and 1.

background-color: hsla(120, 100%, 25%, 0.5);

EXERCISES