28FebCSS: the ‘opacity’ property

Today we will talk about the ‘opacity’ property in CSS and how it works on IE and Firefox at the same time.

We will try to get the same effect as the image below:

To create this effect you have to add the following lines on the html file:

<div class="background">
   <div class="white">This is an exemple with the CSS opacity property</div>
</div>

The first div have the class “background” to put a standard background and the second div is inside the first div to put another background called “white” over the first background.

Now you can customize the classes with the following attributes and values on your css file:

.background{
 background-image: url(caracol.png);
 width: 300px;
 height: 208px;
 border: 1px solid #000000;
}

.white{
 background-color: #ffffff;
 width: 250px;
 height: 158px;
 border: solid 1px #000000;
 margin: 25px 25px;
 opacity: 0.6;
 filter:alpha(opacity=60);
}

The class “background” contains an image background, the class “white” contains a background color with the opacity property to obtain the transparent effect. The attribute “opacity: 0.6;” is for Firefox and the values can go from 1.0 to 0.0, to be able to show this effect in IE you have to use the following code  “filter:alpha(opacity=60);” and the possible values can go from 100 to 0.

Remember to put the Doctype declaration on your HTML file to avoid the problems with the diferents bowsers and also write a stardard code.

I hope you enjoy it and do not hesitate if you have any doubt.