CSS Image Opacity
CSS opacity property is nothing but Creating transparent images.
Example:46
Example(transparent.html):
<html><head><style>
Img {
opacity:0.4;
filter:alpha(opacity=40); }
img:hover {
opacity:1.0;
filter:alpha(opacity=100); }
</style></head>
<body>
<h1>Image Transparency</h1>
<img src="d:\css\linux.GIF" width="150" height="113" alt="linux">
<img src="d:\css\thunder.GIF" width="150" height="113" alt="thunder">
<p><b>Note:</b> In IE, a <!DOCTYPE> must be added for the
:hover selector to work on other elements than the
<a> element.</p>
</body></html>
Example:47
Example(transparent2.html):
<html><head><style>
div.background {
width: 500px;
height: 250px;
background: url(thunder.gif) repeat;
border: 2px solid black; }
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60); }
div.transbox {
margin: 30px 40px;
font-weight: bold;
color: #000000; }
</style></head>
<body><div class="background">
<div class="transbox">
<p>This is some text, placed in the transparent box.First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. </p>
</div></body></html>
