HTML and CSS Reference
In-Depth Information
Having added this background color to the element, you'll notice that the shade is not exactly
what we want. As we did with the opacity property on the .logo element, we'll remove
the HSLA syntax, and just use plain RGB:
footer {
background-color: rgb(66, 3, 30);
This gives us the background color we want, as shown in Figure 3.11 .
Figure 3.11. Our footer with the correct background color
Opacity versus Color-based Transparency
If you're going to choose a method to achieve transparency on one or more elements, it's
important to understand that there's a big difference between how transparency is achieved
using the opacity property compared to the transparency channel of the color values we just
RGB, HSL, RGBA, and HSLA colors can be used anywhere in a CSS file where a color
value is accepted (such as on backgrounds and borders). But the opacity property is ap-
plied directly on an element itself, rather than as a color value. This has one major drawback:
Search WWH ::

Custom Search