webdesign.about.com Wrote:The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% 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
But It Doesn't Work in Internet Explorer and Some Mozilla Versions

Neither IE 6 nor 7 support the CSS 3 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)

For some older Mozilla browsers you need to use the property "-moz-opacity" to change the transparency. It works the same as the CSS 3 property.

    -moz-opacity:0.5;

See the -moz-opacity in action (Mozilla only)
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.

    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" style="opacity:0.5;filter: alpha(opacity=50) ;" />

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

    #imghover a:hover img { filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: .5;opacity:0.5; }

Affects this HTML:

    <div id="imghover">
    <a href="#"><img src="http://z.about.com/d/webdesign/1/0/N/9/1/24-arrow-next.png" alt="next" style="width:24px;height:24px;border:none;" /></a>
    </div>

See the images made transparent
Put Text on Your Images

I found this on CSSPlay. 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.

First you create a container div and place your image inside:

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    </div>

Follow the image with an empty div - this is what you'll make transparent.

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    <div id="text"></div>
    </div>

The last thing you add in your HTML is the div with your text in it:

    <div id="image">
    <img src="http://z.about.com/d/webdesign/1/0/Y/B/1/shasta.jpg" alt="Shasta" />
    <div id="text"></div>
    <div id="words">This is my dog Shasta. Isn't he cute!</div>
    </div>

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;
      width:170px;
      height:128px;
      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.70;
      opacity:0.7;
    }
    #words {
    position:absolute;
      top:0;
      left:0;
      width:60px;
      height:118px;
      background:transparent;
      padding:5px;
    }