HTML and CSS Reference
In-Depth Information
Creating a Semi-Transparent Object
• To create a semi-transparent object, apply the style
opacity:
value
;
where
value
ranges from 0 (completely transparent) up to 1 (completely opaque).
• To create a semi-transparent object under Internet Explorer version 8 or earlier, apply
the filter
Alpha(opacity=
value
)
where
value
ranges from 0 (completely transparent) up to 100 (completely opaque).
You'll use this style now to set the opacity of the two photos to 0.7.
To set the opacity of the photos:
◗
1.
Return to the
effects.css
file in your text editor.
◗
2.
At the bottom of the file, insert the following style rule, as shown in Figure 8-33:
/* Styles for semi-transparent images */
figure#photo4, figure#photo5 {
opacity: 0.7;
}
figure 8-33
setting the opacity
sets the opacity of
the two bottom
photos to 70%
◗
3.
Save your changes to the file, and then reload
treebook.htm
in your Web
browser. Figure 8-34 shows the final appearance of the Web page.
