CSS 3 Opacity
Examples
By Jennifer Kyrnin, About.com Guide
- Basic Examples
- Get Opacity to Work in Internet Explorer
- Don't Forget Browser Prefixes
- Playing with Image Opacity
- Images with Text Above
Other Opacity Examples
Basic Examples
This paragraph has opacity 1.0.
background-color:#30f; color:#fff; opacity:1.0;
This paragraph has opacity 0.8.
background-color:#30f; color:#fff; opacity:0.8;
This paragraph has opacity 0.5.
background-color:#30f; color:#fff; opacity:0.5;
This paragraph has opacity 0.2.
background-color:#30f; color:#fff; opacity:0.2;
Return to What is CSS3 Opacity? article.
Get Opacity to Work in Internet Explorer
This paragraph has opacity 1.0.
background-color:#30f; color:#fff; filter: alpha(opacity=100);
This paragraph has opacity 0.8.
background-color:#30f; color:#fff; filter: alpha(opacity=80);
This paragraph has opacity 0.5.
background-color:#30f; color:#fff; filter: alpha(opacity=50);
This paragraph has opacity 0.2.
background-color:#30f; color:#fff; filter: alpha(opacity=20);
Return to What is CSS3 Opacity? article.
Don't Forget Browser Prefixes
This paragraph has opacity 1.0.
background-color:#30f; color:#fff; -moz-opacity:1.0; -webkit-opacity:1.0;
This paragraph has opacity 0.8.
background-color:#30f; color:#fff; -moz-opacity:0.8; -webkit-opacity:0.8;
This paragraph has opacity 0.5.
background-color:#30f; color:#fff; -moz-opacity:0.5; -webkit-opacity:0.5;
This paragraph has opacity 0.2
background-color:#30f; color:#fff; -moz-opacity:0.2; -webkit-opacity:0.2;
Return to What is CSS3 Opacity? article.
Playing with Image Opacity
The original image:
50% Transparent
Mouse over this image:
I just have one image that changes in opacity when you mouse over it. Pretty neat!
Return to What is CSS3 Opacity? article.
Images with Text Above
Return to What is CSS3 Opacity? article.
Jennifer Kyrnin