HTML Div transparency CSS style Opacity
Opacity CSS style property provides the functionality to apply the transparency effect on HTML Div element. FireFox and Opera web browsers support the CSS opacity property whereas Internet Explorer does not support the opacity property of CSS. You can overlap the two HTML Div <div> tags by using nested div style both having different background colors. It will display the transparency effect on the nested div element. Opacity property of the CSS style allows you to increase or decrease the alpha property of HTML div tag. This alpha opacity increases or decreases the see through property of background color applied on the <div> tag along with appearance of div tag itself.
CSS Div Opacity Examples:
From the following links you can view the live samples of Div Opacity styles using CSS:
Syntax for HTML Div CSS style Opacity
opacity: .5;
Opacity property of CSS style accepts the value from 0 to 1. You can set opacity to 0, but it will make the div tag disappeared from the web page. Highest value 1 will make the opaque div tag with solid background color. Values such as .1, .5 or .7 for opacity CSS style property shows a div <div> tag having transparency effect on it. .5 value of opacity renders the HTML div tag with semi transparent behavior of its background color as well as its overall appearance.
Example of HTML Div transparency CSS style Opacity
<html>
<head>
<title>HTML Div Transparent</title>
<style type="text/css">
.outerDivBg {
background-color: #FF0000;
width: 300px;
padding: 5px;
}
.innerDivBg {
border: solid 2px #00FF00;
background-color: #FFFF00;
opacity: .5;
width: 98%;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="outerDivBg">
<div class="innerDivBg">
This HTML Div tag is transparent.<br />
Basckground color of nested div is yellow.<br />
But Opacity CSS property has changed the output color into color mixture of yellow
and red to orange color.
</div>
</div>
</body>
</html>
Above example will work in FireFox and Opera web browsers only. Click here to get the code for HTML div transparency CSS opacity style using filter CSS property style, working on all browsers including Internet Explorer (IE).
Output:
Get the output of above discussed code from the following link:
Continue to next tutorial: HTML CSS Opacity filter for Internet Explorer - IE to learn CSS Opacity filter property and its use to set Div background transparency.
