Creating transparent images with CSS is easy.
opacity property is a part of the CSS3 recommendation.
The CSS3 property for transparency is
First we will show you how to create a transparent image with CSS.
The same image with transparency:
Look at the following CSS:
opacity property can take a value from 0.0 - 1.0. The lower value,
the 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.
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 hovers over one of the images. In this case we want the image to NOT be
transparent when the user hovers over it. The CSS for this is
When the mouse pointer moves away from the image, the image will be transparent again.
This is some text that is placed in the transparent box.
The source code looks like this:
First, we create a <div> element (class="background") with a background image, and a border. Then we create another <div> (class="transbox") inside the first <div>. The <div class="transbox"> have a background color, and a border - the div is transparent. Inside the transparent <div>, we add some text inside a <p> element.