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!
More HTML and CSS: 
