1. About.com
  2. Computing & Technology
  3. Web Design / HTML

CSS 3 Opacity

Example

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;opacity:1.0;

This paragraph has opacity 0.8.
background-color:#30f;color:#fff;width:100%;opacity:0.8;

This paragraph has opacity 0.5.
background-color:#30f;color:#fff;width:100%;opacity:0.5;

This paragraph has opacity 0.2.
background-color:#30f;color:#fff;width:100%;opacity:0.2;

Return to Opacity Article

Get Opacity to Work in Internet Explorer

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=100);

This paragraph has opacity 0.8.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=80);

This paragraph has opacity 0.5.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=50);

This paragraph has opacity 0.2.
background-color:#30f;color:#fff;width:100%;filter: alpha(opacity=20);

Return to Opacity Article

Some Older Versions of Mozilla Browsers Need a Little Help Too

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:1.0;;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.8;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.5;

This paragraph has opacity 1.0.
background-color:#30f;color:#fff;width:100%;-moz-opacity:0.2;

Return to Opacity Article

Playing with Image Opacity

The original image:

Shasta

50% Transparent

Shasta

Mouse over this image:

next
I just have one image that changes in opacity when you mouse over it. Pretty neat!

Return to Opacity Article

Images with Text Above

Shasta
This is my dog Shasta. Isn't he cute!

Return to Opacity Article

Jennifer Kyrnin

Discuss in my forum

©2012 About.com. All rights reserved. 

A part of The New York Times Company.