how to remove opacity from child elements

Remove opacity from child elements

CSS Opacity That Doesn’t Affect Child Elements

CSS background transparency without affecting child elements

Solution

Copy following html code and paste it.

<html>
<head>
<title>how to remove opacity from child elements</title>
</head>
<body>
<style type=”text/css”>
#Opacitybackground
{
background: url(waterbg.jpg) no-repeat 0 0;
height: 440px;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
#Childtext
{
background-color: #00689e;
position: absolute;
top: 13px;
left: 13px;
color: #000;
width: 510px;
font-family: Verdana;
font-size: 12px;
line-height: 22px;
text-align: justify;
padding: 10px;
color: White;
}
</style>
<div id=”Opacitybackground”>
</div>
<div id=”Childtext”>
<p>
This is example of remove opacity from child elements.</p>
</div>
</body>
</html>

Click here to download background image

Output

Remove opacity from child elements

About the Author

avatar