Slide 5.30: CSS image opacity/transparency

Slide 5.29: CSS image gallery
Slide 5.31: CSS image opacity/transparency (cont.)
Home

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.

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>

Slide 5.29: CSS image gallery
Slide 5.31: CSS image opacity/transparency (cont.)
Home