Opacity in CSS
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.
<html>
<title>Transparent DIV</title>
<head>
<style type=”text/css”>
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;
}
</style>
</head>
<body>
<div><center><p>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.</p>
</div>
</body>
</html>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!
Saw what you need to do is to write this code at the div opacity: 0.70;
That’s it! Is very simple… here is the final result and here is an Lorem Ipsum Generator! Thank you!
Tags: cascade style sheet, CSS example, CSS properties, Design, how to, Opacity in CSS, tutorial, w3c, webdesign, world wide web consortium
November 8th, 2007 at 4:22 am
[...] Opacity in CSS | PiticStyle 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. (tags: css opacity howto) [...]
November 9th, 2007 at 7:13 am
[...] here Filed under: [...]
November 25th, 2007 at 3:31 am
[...] Erica Sadun wrote an interesting post today!.Here’s a quick excerptNeither 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 … [...]