CSS Image Opacity / Transparency

In print design you can place one image over another or maybe even a text and change the transparency of that image. That is not so easy to achieve when it comes to the internet. But with CSS you can alter the opacity of the image and make it so that the background would appear more distinct than it is.

CSS Image Opacity / Transparency

You can tweak the opacity property of the images that you are going to use on a page so that you can choose to show an image below it or completely block it out. The transparency ranges from 0 to 1.0. When you give an image an opacity of 0 then that would be completely see through and would be as if there is no image there. An opacity of 100% means that it would be completely opaque and that nothing below it would be seen.

Setting the Opacity

If you are working on a page and you want to set the opacity of an image to 50% then this is how you would code it:

opacity:0.5;

The problem with opacity as with the other properties in CSS is that it is not completely compatible with some browsers. For example it is not supported by the Internet Explorer. If you are using either IE 6 or 7 then the CSS opacity property is not going to be supported at all. You would have to use an alpha filter instead, which is something for Windows only. When it comes to other browsers, there are no real issues.

You just have to use browser prefixes in order to make sure that the older versions of the other browsers such Mozilla would be able to use the opacity property. Here is an example of codes for browser prefixes:

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

 

Keep in mind that the prefixes for the browsers should come first of the CSS codes.

Placing Texts on Images

With this CSS property, you can place texts over images and make the image appear to fade over where the text is placed. It could be a bit complicated to achieve since the simple changing of the opacity of the image itself would result in the image disappearing completely. The same thing is true when it comes to the text. Here is a sample code where you can place texts over images and change the opacity:

 

#image {
position:relative;
width:180px;
height:148px;
margin:0;
}
#text {
position:absolute;
top:0;
left:0;
width:60px;
height:118px;
background:#fff;
padding:5px;
}
#text {
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.50;
opacity:0.7;
}
#words {
position:absolute;
top:0;
left:0;
width:50px;
height:128px;
background:transparent;
padding:6px;
}

The text in this code is placed on the left side of the page. If you want to place the text on the right then all that you have to do is to replace left:0; with right:0 instead.

These are just some of the basic things about CSS opacity and transparency that you should know about.

Separator image .