Opacity in CSS

29 Sep

Today we learn about opacity in CSS! I made an example here and here you have the files.

Information about opacity in CSS:

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;

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:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

More info on About.com . Now let’s to see my example…

1. Open Notepad and type this.

Transparent DIV

body
{
background-image: url(“picture.jpg”);
background-repeat: no-repeat;
color: white;
font-size: 20px;
}
div
{
width: 200px;
height: 500px;
margin-left: 15em;
background-color: black;
opacity: 0.70;
}
p { padding-top: 20px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed cursus. Sed sagittis. Nullam imperdiet enim nec quam. Fusce consequat, nunc lacinia interdum fermentum, tortor ante cursus quam, sit amet eleifend risus nunc suscipit risus.

 

In this example i create an html page with css very simple. I put a background image and a div with the background color black. At this div I low the Opacity at 70%! In the next picture you have the div without opacity… is ugly!

image 1

Saw what you need to do is to write this code at the div opacity: 0.70;

Opacity in CSS Tutorial: Final Result

That’s it! Is very simple… here is the final result and here is an Lorem Ipsum Generator! Thank you!

Author’s URL: http://www.piticstyle.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: