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:
Swan Swan

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.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information