Creating transparent images with CSS is easy.
Note: The CSS opacity property is a part of the W3C CSS3 recommendation.
Try it Yourself - Examples
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.
The same image with transparency:
Look at the following CSS:
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.
Example 2 - Image Transparency - Hover Effect
Mouse over the images:
The CSS looks like this:
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it.
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be transparent again.
Example 3 - Text in Transparent Box
The source code looks like this:
First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.