Opacity
Source:
<div style=
"opacity:1.0; filter:alpha(opacity=100)">
"opacity:1.0; filter:alpha(opacity=100)">
Web page:
Opacity: 100
Source:
<div style=
"opacity:0.75; filter:alpha(opacity=75)">
"opacity:0.75; filter:alpha(opacity=75)">
Web page:
Opacity: 75
Source:
<div style=
"opacity:0.5; filter:alpha(opacity=50)">
"opacity:0.5; filter:alpha(opacity=50)">
Web page:
Opacity: 50
Source:
<div style=
"opacity:0.25; filter:alpha(opacity=25)">
"opacity:0.25; filter:alpha(opacity=25)">
Web page:
Opacity: 25
Source:
<div style=
"opacity:0.1; filter:alpha(opacity=10)">
"opacity:0.1; filter:alpha(opacity=10)">
Web page:
Opacity: 10
Source:
<div style=
"opacity:0; filter:alpha(opacity=0)">
"opacity:0; filter:alpha(opacity=0)">
Web page:
Opacity: 0
(Note: the filter:alpha(opacity=#) tags above are for compatibility with older versions of IE.)
Opacity used to separate text from background
This example actually has two divs floating over the sky image. One div is for the transparent white background and is set for an opacity of 40. It is behind a same-sized div that contains the text. If they were both in the same div, the text would also be transparent and less legible.
Changing Opacity on MouseOver
This simple bit of CSS makes things transparent when the mouse moves over them. This is often used as an alternative way to indicate that the images are links.
Head:
<style type="text/css">
.maketrans:hover
{ opacity:0.5; filter:alpha(opacity=50); }
</style>
.maketrans:hover
{ opacity:0.5; filter:alpha(opacity=50); }
</style>
Body:
<div class="maketrans"><img src="coolwhip.gif" width="64" height="64" /></div>
<div class="maketrans"><img src="negative.gif" width="64" height="64" /></div>
<div class="maketrans"><img src="negative.gif" width="64" height="64" /></div>
Web page:
And it also works in reverse:
Head:
<style type="text/css" media="screen">
.makelesstrans {
color: #000;
opacity:0.3; filter:alpha(opacity=30);
}
.makelesstrans:hover {
color: #000;
opacity:1.0; filter:alpha(opacity=100);
}
</style>
.makelesstrans {
color: #000;
opacity:0.3; filter:alpha(opacity=30);
}
.makelesstrans:hover {
color: #000;
opacity:1.0; filter:alpha(opacity=100);
}
</style>
Body:
<div class="makelesstrans" style="margin: 0 auto; width: 500px"><div style="; float: left; margin: 5px 10px 10px 0"><img src="mfolds.gif" width="64" height="64" alt="mfolds" /></div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <a href="#">commodo consequat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Web page:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
