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-
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:
<div><h1>Opacity is cool</h1></div>
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.
Search WWH ::

Custom Search