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:

`1`	`<img` `src="klematis.jpg"` `width="150"` `height="113"` `alt="klematis"`

`2`	`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