1. Tech

Your suggestion is on its way!

An email with a link to:

http://webdesign.about.com/od/examples/l/blopacity.htm

was emailed to:

Thanks for sharing About.com with others!

CSS 3 Opacity

Examples

By , About.com Guide

Here are some examples from the What is CSS3 Opacity? article that demonstrate how opacity works on web pages. You'll see some basic examples of text on a more and less opaque background color. Then how to get it to work in older versions of Internet Explorer (note: these don't work in other browsers). Plus, you can see how you can play with opacity and your images to create more interesting effects.

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:
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 What is CSS3 Opacity? article.

Images with Text Above

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

Return to What is CSS3 Opacity? article.

Jennifer Kyrnin
See More About

©2014 About.com. All rights reserved.