CSS Opacity inheritance issue [duplicate]

问题

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.

回答1:

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/

回答2:

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/

回答3:

You cannot reset opacity. Its inherited by all descendants.

But:

you can use rbga/hsla/alpha-png backgroungs and rgba/hsla color for texts and borders, to achieve similar effect (but with more work).

来源：https://stackoverflow.com/questions/10070590/css-opacity-inheritance-issue

标签

html

css

opacity