Home/ Questions/Q 7766129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T15:20:02+00:00

Possible Duplicate: CSS Opacity Property I’m making a layer on an image which has

  • 0

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 1024×768.

And I want to know how to reset the opacity of #TXT.

please help.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0