CSS transparent content
Transparency adds an interesting effect to webpages.
Setting transparency
You can set the transparency for an element using the opacity property which takes a value between 0.0 (full transparency) and 1.0 (no transparency at all).
NOTE: The opacity property is not part of the CSS standard yet, though it does work in modern browsers.
NOTE: In Internet Explorer instead of using opacity you will have to use this command - filter:alpha(opacity=op) where op = the transparency level between 0 (full transparency) and 100 (no transparency at all).
Making images transparent
Make an image transparent by using the opacity property on the <img> tag:
img.trans {
opacity: 0.2;
filter: alpha(opacity=20); /*for Internet Explorer*/
}
Non-transparent image: <img src="/images/swan.jpg" alt="Swan" />
Transparent image: <img src="/images/swan.jpg" alt="Swan" class="trans" />
Output:
| Non-transparent image: | Transparent image: |
 |
|
Making containers transparent
Make a container transparent by using the opacity property on the <div> tag:
div.trans, div.notrans {background-color: #d1d0c0;}
div.trans {
opacity: 0.5;
filter: alpha(opacity=50); /*for Internet Explorer*/
}
<div class="trans">
This container has it's own background color but it is transparent............
</div>
<div class="notrans">
This container is NOT transparent. Just a plain old container.........
</div>
Output:
This container has it's own background color but it is transparent. Transparency certainly adds an interesting effect to webpages.
This container is NOT transparent. Just a plain old container. Both containers actually have the same background color, but notice how the above container appears lighter. This is because it is transparent.