Clever Geek Handbook

CSS opacity inheritance problem

Possible duplicate:
CSS opacity property

I create a layer on an image with transparency and I have a problem there.

When I wrote down any texts on a layer, they also get the same transparency.

I thought about it because of an inheritance issue and added 'position: relative' to reset my child div, but it didn't work at all.

I just want to reset the opacity of the child div (#TXT below).

Here is 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 image size brand-new-car.jpg is 1024x768.

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

Please, help.

Thanks in advance.

+3


source to share


3 answers


You will have to hack your way if you want the image to be transparent as hsla or rgba only work for colors. You will have to change your HTML, take out the text wrapper and then place it on top of the image layer. This is the only way out.



You can find Chris Coyer supporting the same hack here. http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

+3


source


Hi I mention a property with which you can increase and decrease the opacity of the background and it will not affect the color of the text, its just to see the css, basically you should use the rgb color in the background alpa for the opacity.

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



or see an example: - http://jsfiddle.net/8LFLd/3/

+8


source


Cannot reset opacity. He was inherited by all descendants.

But:

  • you can use rbga / hsla / alpha-png backgroungs and rgba / hsla color for texts and borders to achieve a similar effect (but with a lot of work).
+2


source






More articles:


All Articles