Information opacity in CSS:
property has a value of opacity of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below the item shows through. 1.0 is 100% opaque - nothing below element will show through.
So, to set an element of transparency of 50%, you may write: opacity: 0.5;
Neither IE 6 or 7 supports CSS 3 opacity property. But you're out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (fully transparent) to 100 (fully opaque). So, for your transparency in IE, you must multiply your opacity by 100 and add an alpha filter to your style:
Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;
Example:
Open notepad type below code
<html>
<title>Opacity in CSS</title>
<head>
<style type="text/css">
body
{
background-image: url("http://travelvacationguides.co.cc/opacity_in_css.jpg");
background-repeat: no-repeat;
font-size: 18px;
}
div
{
width: 200px;
opacity: 0.70;
height: 500px;
margin-left: 5em;
background-color: black;
}
p { padding-top: 20px;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div><p>Learn how to make <a href="http://w3schoolss.blogspot.com/" style="color:#FFFFFF;">opacity in css</a>. this example shows opacity in css in html.</p>
</div>
</body>
</html>
In this example, I create an html page with CSS easy. I put a background image and a div with the background color black. So I make the div opacity to 70%!
This results in:
