<!DOCTYPE html>
<html>
<head><title>css3</title>
<style>
div.bg
{
width:500px;
background:#000;
border:2px solid #00ff00;
}
div.transparent-box
{
width:400px;
margin:40px;
background-color:#ffffff;
border:1px solid black;
opacity:0.5;
filter:alpha(opacity=50);
}
div.transparent-box p
{
margin:20px;
font-weight:bold;
text-align: justify;
}
</style>
<div class="bg">
<div class="transparent-box">
<p>
CSS property specifies the transparency of an element.
CSS property specifies the transparency of an element.
CSS property specifies the transparency of an element.
CSS property specifies the transparency of an element.
CSS property specifies the transparency of an element.
</p>
</div>
</div>
![alt text](https://lh3.googleusercontent.com/-88Y4-_FfgLE/UsalZs4I3wI/AAAAAAAAABU/bF0dFeUrsX8/w503-h245-no/demo.jpg)
The CSS3 property for transparency is opacity.
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A setting of opacity: 1 would make the element completely opaque (i.e. 0% transparent), whereas opacity: 0 would make the element completely transparent (i.e. 100% transparent).A lower value makes the element more transparent.
opacity: x;
syntax for CSS opacity in all current browsers.The x can take a value from 0.0-1.0.
filter:alpha(opacity=x);
Internet Explorer 8 and earlier version supports a Microsoft-only property "alpha filter" to control the transparency.The x can take a value from 0-100.
opacity: 0.5; /* Opacity for Modern Browsers /
filter: alpha(opacity=50); / Opacity for IE8 and lower /
zoom: 1; / Fix for IE7 */
Combining the both steps above you will get the opacity for all browsers.
0 Comment(s)