Learn more about CSS3 opacity and background transparency

One of the things you can easily do in print layout but not on the web is to overlay text on top of an image or colored background, and change the transparency of that image so that the text fades into the background. But there is a property in CSS3 that will allow you to change the opacity of your elements as they go in and out: opacity.

How to use the opacity property

The opacity property takes a value for the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent – ​​anything below that element will show completely. 1.0 is 100% opaque: nothing below the element will show through.

So to set an element to 50% transparency, you would write:

opacity:0.5;

See some examples of opacity in action

Be sure to test in older browsers

Neither IE 6 nor 7 support the CSS3 opacity property. But you’re not out of luck. Instead, IE supports a Microsoft-only property alpha filter. Alpha filters in IE accept values ​​from 0 (completely transparent) to 100 (completely opaque). So to get your transparency in IE you need to multiply your opacity by 100 and add an alpha filter to your styles:

filter: alpha(opacity=50);

See the alpha filter in action (IE only)

And use browser prefixes

You should use the -moz- and -webkit- prefixes so that older versions of Mozilla and Webkit browsers also support it:

-Capacity of the webkit: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

Always put the browser prefixes first, and the valid CSS3 property last.

Try browser prefixes on older Mozilla and Webkit browsers.

You can also make images transparent

Set the opacity on the image itself and it will fade into the background. This is really useful for background images.

And if you add an anchor tag, you can create hover effects simply by changing the opacity of the image.

a:hover img {
filter: alpha(opacity=50)
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
-moz-opacity: 0.5;
-Capacity of the webkit: 0.5;
opacity:0.5;

It affects this HTML:

Try the styles above and HTML in action.

Put text on your images

With opacity, you can place text over an image and have the image appear to fade where that text is.

This technique is a bit tricky, because you can’t just fade the image, as this will fade the entire image. And you can’t fade the text box, because the text will fade there too.

1. First create a container DIV and place the image inside:
2. Follow the image with an empty DIV, this is what you will make transparent.
3. The last thing you add in your HTML is the DIV with your text in it:
   1. This is my dog ​​Shasta. Its not cute!
4. It is styled with CSS positioning, to place the text on top of the image. I put my text on the left side, but you can put it on the right by changing the two properties left:0; right properties:0;. #Image {
   1. position:relative;
   2. width:170px;
   3. height:128px;
   4. margin:0;
   5. #text {
   6. position:absolute;
   7. up:0;
   8. left:0;
   9. width:60px;
   10. height:118px;
   11. background:#fff;
   12. padding:5px;
   13. #text {
   14. filter: alpha(opacity=70);
   15. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
   16. -moz-opacity: 0.70;
   17. opacity:0.7;
   18. #words {
   19. position:absolute;
   20. up:0;
   21. left:0;
   22. width:60px;
   23. height:118px;
   24. Transparent background;
   25. padding:5px;

see how it looks