Friday, October 24, 2008

Creating a Transparent Image with CSS

May you want to make a transparent image for link:hover or other.

this is the css to make the 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)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

Tip: The CSS3 syntax for transparency is opacity:x.

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

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



Learn More at http://www.w3schools.com

No comments: