CSS不透明度继承问题

4

可能是重复问题:
CSS不透明度属性

我正在为一张带有透明度的图像制作一个层,但遇到了问题。

当我在层上写下任何文本时,它们也会获得相同的透明度。

我认为这是继承问题,并添加了“position:relative”来重置子div,但完全没有用。

我只想重置子div(#TXT)的不透明度。

这是我的代码。

<!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。

我想知道如何重置#TXT的透明度。

请帮忙。

提前感谢。


https://dev59.com/ZF3Va4cB1Zd3GeqPBYqd - c69
3个回答

8

你好,我将介绍一种属性,可以增加和减少背景的不透明度,而不会影响文本颜色。很简单,看看CSS,基本上你需要在背景中使用RGB颜色来设置不透明度。

background:rgba(146,146,146,0.1);

或者查看示例: http://jsfiddle.net/8LFLd/3/


4

2

您无法重置不透明度,它会被所有后代元素继承。

但是:

  • 您可以使用rbga/hsla/alpha-png背景以及rgba/hsla颜色来实现类似的效果(但需要更多的工作)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接