CSS不透明度继承问题 [英] CSS Opacity inheritance issue
问题描述
可能重复：
CSS Opacity属性
我在图片上制作图层
当我在图层上写下任何文本时，他们也得到相同的透明度。
When I wrote down any texts on the layer, they also get the same transparency.
我认为这是因为继承问题，并添加了position：relative来重置我的孩子div，但是它根本没有工作。
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.
我只想重置子div的不透明度（#TXT以下）。
I just want to reset the opacity of the child div(#TXT below).
这是我的代码。
<!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>
图片的大小brand-new-car.jpg是1024x768。
the size of the image brand-new-car.jpg is a 1024x768.
我想知道如何重置#TXT的不透明度。
And I want to know how to reset the opacity of #TXT.
请帮助。
提前感谢。
推荐答案
如果你想要图像与透明度作为hsla或rgba仅工作为颜色。您必须修改HTML，取出文本包装，然后将其放置在图像层上。这是唯一的出路。
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.
在这里你可以找到Chris Coyier支持同样的黑客。 http://css-tricks.com/non-transparent-elements- inside-transparent-elements /
Here you can find Chris Coyier supporting the same hack. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
这篇关于CSS不透明度继承问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
