If you want transparent background div without the image then this article will help you . The transparent_div class gives you the transparent output of the div on which you will add this class. This CSS supported in modern browser as well as the old browser. The following is the code snippet is the css cross browser opacity.
.transparent_div
{
/* modern browsers */
opacity: 0.7;
-ms-filter: “alpha(opacity=70)”; /* ie 8 */
/* IE 5-7 */
filter: alpha(opacity=70);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;}
From above syntax of the cross browser opacity using the css that supports in the most of all browsers find the some explanation details.
Modern browsers supports the opacity css. Some older Internet Explorer browser supports the -ms-filter css for the cross browser opacity. Safari browsers supports the -khtml-opacity css. Netscape supports the -moz-opacity css. I think all cross browser opacity cover in this post and it also known as the web kit opacity supports for many different browser.
For Example:
See the following example in this tutorial to understand more about this cross browser opacity and its a bundle of the web kit opacity. The following is the basic level tutorial for the web kit opacity and we can see the opacity color of the child blue div on the image.
<style>
body{font-family:Verdana, Arial, Helvetica, sans-serif; }
.parent { width:400px;height:300px;margin:auto;padding-top:100px; background-color:#af0000;line-height:200px; vertical-align:middle;}
.child { width:200px;height:100px;margin:auto;background-color:#0c3776; text-align:center;line-height:100px;color:#FFFFFF}
.transparent_div
{
/* modern browsers */
opacity: 0.7;
-ms-filter: “alpha(opacity=570)”; /* ie 8 */
/* IE 5-7 */
filter: alpha(opacity=70);
/* Netscape */
-moz-opacity: 0.7;
/* Safari 1.x */
-khtml-opacity: 0.7;
}
</style>
<div class=”parent”>
<div class=”child transparent_div”>
Transparent Child Div </div>
<div class=”child”>
Child Div</div>
</div>
The above example of the cross browser opacity using the only css supports the Modern browsers plus many old browsers. We can also set the background image opacity by adding background image css to the html div element. If want to know more that how to apply the image as background using the css then visit the following related link.
CSS BACKGROUND IMAGE PROPERTY TUTORIAL
FIXED POSITION BACKGROUND IMAGE CSS
See related articles:
Dynamic CSS Rounded Corners Buttons
Beautiful Text Shadow Using CSS
Customize Text Area Resize Using CSS
