[CSS]CSS Advanced - CSS Image Opacity/Transparency

출처: http://www.w3schools.com/css/css_image_transparency.asp

Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

CSS Image Opacity

Creating transparent images - mouseover effect
Creating a transparent box with text on a background image

Image opacity explained