Slide 5.30: CSS image opacity/transparency

CSS Image Opacity/Transparency

Creating transparent images with CSS is easy.

Example 1: Creating a Transparent Image
First we will show you how to create a transparent image with CSS.

Regular Image	The Same Image with Transparency

Look at the following source code:

 <img src="klematis.jpg" width="150" height="113" alt="klematis"
   style="opacity:0.4;filter:alpha(opacity=40)" />

Mozilla uses the property opacity:x for transparency, where x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE uses filter:alpha(opacity=x), where x can be a value from 0 - 100. A lower value makes the element more transparent.

The CSS3 syntax for transparency is opacity:x, where x can be a value from 0.0 - 1.0. A lower value makes the element more transparent. However, this syntax is not supported by any browsers yet.

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> img.trans { opacity:0.4; filter:alpha(opacity=40); } </style> </head> <body bgcolor="#EDF3FE"> <h2>Image Transparency</h2> <img src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/klematis.jpg" /> <img src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/klematis.jpg" class="trans" width="150" height="113" alt="klematis" /> </body> </html>