4

可能重复：
CSS Opacity 属性

我正在一个具有透明度的图像上制作一个图层，我在那里遇到了问题。

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

我认为这是因为继承问题并添加了“位置：相对”来重置我的子 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 的不透明度。

请帮忙。

提前致谢。

4

3 回答 3

8

嗨，我提到了您可以通过它增加和减少背景不透明度的属性，并且不会影响文本颜色，它很简单，请参见 css，基本上您必须在背景 alpa 中使用 rgb 颜色来获得不透明度。

背景：rgba（146,146,146,0.1）；

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

于 2012-04-09T12:06:16.757 回答
4

如果您想以透明方式进行成像，因为 hsla 或 rgba 仅适用于颜色，您将不得不破解您的方式。您必须修改 HTML，取出文本包装器，然后将其放置在图像层上。这是唯一的出路。

在这里，您可以找到支持相同 hack 的 Chris Coyier。http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

于 2012-04-09T08:43:37.003 回答
2

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

但：

  • 您可以将 rbga/hsla/alpha-png 背景和 rgba/hsla 颜色用于文本和边框，以实现类似的效果（但需要更多工作）。
于 2012-04-09T08:18:39.810 回答