HTML and CSS Reference
In-Depth Information
background-color: hsl(156, 40%, 100%);
}
And the following two examples will both produce pure black, even though, again, the hue
and saturation levels are different:
body {
background-color: hsl(245, 63%, 0%);
}
p {
background-color: hsl(59, 20%, 0%);
}
Transparency
There are a few different ways to achieve partially transparent or semi-opaque elements on a
web page. The best-known way to do this is by means of images; that is, using either a trans-
parent GIF image or a transparent PNG image. You can use Photoshop or virtually any other
image editor to create semi-transparent images.
To avoid having to create extra image files, you can achieve transparency on an HTML page
using one of three different CSS features.
The Opacity Property
The opacity property lets you define how opaque an element should be. Let's use the opacity
property on our logo, if only temporarily:
.logo {
opacity: .5;
}
The opacity property takes a number value from 0 to 1, so you're allowed to use decimal
values. Our example sets the opacity to
.5
. If we add this declaration to the existing styles
on our
.logo
element, it'll cause the logo to appear 50% opaque (or, you could say, 50%
