SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Opacity in css

Opacity in css

PiticStyle Tutorials May 23, 2008

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!

image 1

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

Opacity in CSS

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

subscribe to newsletter