HTML and CSS Reference
In-Depth Information
div:nth-child(5) { opacity: 0.2; }
div:nth-child(6) { opacity: 0; }
When all the elements are sitting
against the same white background,
the effect of decreasing opacity is the
same as using lighter colors. The full
code for this example is in ch09/opac-
ity-1.html.
A common use of opacity is to make a continuous pattern or background
image always be visible without clashing with the main content. Here
the
<h1>
element lies on top of the
<div>
that contains it, but
opacity
is
used to let the background of the
<div>
be partly visible through the
<h1>
:
body {
background-color: #666;
}
div {
background: url(example.png)
no-repeat 50% 50%;
}
h1 {
background-color: #fff;
color: #000
opacity: 0.75;
}
Here's the markup. You can see the full listing in ch09/opacity-4.html:
<body>
<div><h1>Opacity is cool</h1></div>
</body>
Although the
opacity
property isn't inherited in the
CSS
sense, the
opacity of the parent element affects that of its child elements. In the
following example, on the right (listing ch09/opacity-2.html), all the
child elements are invisible because they're contained within an
element that isn't visible, regardless of their individual
opacity
values.
