CSS3 Opacity How to Use it Effectively

Making your backgrounds transparent

Set of semi-opaque aquarelle spots on transparent background

 tovovan / Getty Images

One of the things that you can easily do in print design but not on the Web is overlay text on 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 so that they fade in and out:

opacity

How to Use the Opacity Property

The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is completely transparent—anything below that element will show completely through. 1.0 is completely opaque—nothing below the element will show through.

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

opacity:0.5; 

See some examples of opacity in action

Be Sure to Test in Older Browsers

New browsers all support CSS3, but some older ones don't. 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 should 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 support it too:
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;

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

Test the browser prefixes in older Mozilla and Webkit browsers.

You Can Make Images Transparent Too

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 in an anchor tag you can create hover effects just 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;
-webkit-opacity: 0.5;
opacity:0.5;
}

Put Text on Your Images

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

This technique is a little tricky, because you can't simply fade the image, as that will fade the entire image. And you can't fade the text box, because the text will fade there as well.

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

See how it looks