Page 51 - CSS

footer {
background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Another way to declare a color is to use HSL or HSLa and is similar to RGB and RGBa.

HSL stands for hue, saturation, and lightness, and is also often called HLS:

• Hue is a degree on the color wheel (from 0 to 360).
• Saturation is a percentage between 0% and 100%.
• Lightness is also a percentage between 0% and 100%.

HSLa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.

li a {
background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interaction with background-image

The following statements are all equivalent:

body {
background: red;
background-image: url(partiallytransparentimage.png);
}

body {
background-color: red;
background-image: url(partiallytransparentimage.png);
}

body {
background-image: url(partiallytransparentimage.png);
background-color: red;
}

body {
background: red url(partiallytransparentimage.png);
}

They will all lead to the red color being shown underneath the image, where the parts of the image
are transparent, or the image is not showing (perhaps as a result of background-repeat).

https://riptutorial.com/ 29