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
discussed.
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:
