Menu
Possible Duplicate:
CSS Opacity Property
I'm making a layer on an image which has a transparency and I got a problem there.
When I wrote down any texts on the layer, they also get the same transparency.
I thought it's because of the inheritance problem and added 'position:relative' to reset my child div, though, it didn't work at all.
I just want to reset the opacity of the child div(#TXT below).
Here's my code.
<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<style type="text/css">
*{margin: 0; padding:0; background-color: #555;}
#wrapper {
margin:0 auto;
background-color: white;
width: 922px;
height:349px;
margin-top: 150px;
-webkit-box-shadow: 0px 0px 7px 7px #333;
-moz-box-shadow: 0px 0px 7px 7px #333;
}
#ImgSection {
width: 922px;
height: 349px;
background-color: white;
position: absolute;
background: url("brand-new-car.jpg") -50px -200px no-repeat;
}
#TxtSection {
width: 322px;
height: 349px;
background-color: #222;
opacity: .5;
float: right;
-webkit-box-shadow: inset 3px 0px 3px 0px black;
-moz-box-shadow: inset 3px 0px 3px 0px black;
}
#TXT{
position: relative;
font-size: 50px;
opacity: 1;
}
</style>
<script type="text/javascript">
</script>
</header>
<body>
<div id="wrapper">
<div id="ImgSection"></div>
<div id="TxtSection">
<div id="TXT">dsdsad</div>
</div>
</div>
</body>
</html>
the size of the image brand-new-car.jpg is a 1024x768.
And I want to know how to reset the opacity of #TXT.
please help.
Thanks in advance.
889
Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the css basically you have to use the rgb color in background alpa for opacity.
background:rgba(146,146,146,0.1);
or see the example:- http://jsfiddle.net/8LFLd/3/
132
You'll have to hack your way around, if you want to image with transparency as hsla or rgba work only for colors. You'll have to modify your HTML, take out the text wrapper and then position it over image layer. This is the only way out.
Here you can find Chris Coyier supporting the same hack. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
