Reseting opacity of child element of an element with some opacity

Question

I do not want a child element to inherit parent opacity. [enter link description here][1]

[1]: http://jsfiddle.net/xALAW/ jsfiddle

<html>

    <head></head>
    <body>

        <div class='hasopacity'>
            This is the text with some opacity
            <div class='noopacity'>
                This is the text with no opacity 
            </div>
        </div>
</body>

css

.hasopacity{opacity:0.5}
.noopacity{opacity:1}

Then, as far as I know, you have to make it a sibling rather than a child. — enhzflep, Feb 23 '13 at 08:06
look at http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on — Adriano, Feb 27 '14 at 08:42

score 2 · Accepted Answer · answered Feb 23 '13 at 08:10

2

Child elements must inherit the parent's opacity setting.

The only solution that I am aware of is to have the element that normally would be the child to actually be a sibling element that is positioned to seem like it was a child element.

answered Feb 23 '13 at 08:10

rg88

20,742
18
76
110

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

You can't, this is because you're making transparent something, if another something is inside it, it will be transparent too!

Anyway, this is a repeated question: I do not want to inherit the child opacity from the parent in CSS

edited May 23 '17 at 11:56

Community

1
1

answered Feb 23 '13 at 08:08

martriay

5,632
3
29
39

Reseting opacity of child element of an element with some opacity

2 Answers2