CSS Opacity inheritance issue [duplicate]

2020-02-07 03:33发布

This question already has answers here:

Closed 7 years ago.

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:

回答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/