How to prevent outer
CSS from affecting inner
CSS

Question

I have set opacity on the outer wrapper to (0.5). However, this sets all the inner elements' opacity to (0.5) also. How can I make it so that the inner elements have an opacity of 1? Thanks!

//..The HTML..//

<div class="nav-wrapper">

    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>

 </div>

//..The CSS..//

.circle1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #BBBBBB;
}

.nav-wrapper {
    height: 100%;
    width: 100%;
    top: 0;
    opacity: 0.5;
    background: white;
}

Possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) — CBroe, Nov 19 '16 at 12:34
why opacity on a white element? is there a background image? with your code there is no need for opacity — Sebastian Brosch, Nov 19 '16 at 12:34

score 3 · Accepted Answer · answered Nov 19 '16 at 12:36

3

You should use a rgba background instead of opacity for the nav-wrapper

.nav-wrapper {
    height: 100%;
    width: 100%;
    top: 0;
    //opacity: 0.5;
    //background: white;
    background: rgba(255,255,255, 0.5);
}

answered Nov 19 '16 at 12:36

Marileen

179
1
6

Thanks, I didn't know the terms so I couldn't find the duplicate post. – Lord Goderick Nov 19 '16 at 12:55

score 2 · Answer 2 · answered Nov 19 '16 at 12:37

2

You can't. This is not how opacity works. Use background: rgba(255,255,255,0.5); instead. (rgba(); is color with RGB, and opacity)

answered Nov 19 '16 at 12:37

junkfoodjunkie

3,168
1
19
33

score 1 · Answer 3 · answered Nov 19 '16 at 12:53

1

Here is JSFiddle

When you give background and opacity property to parent div then it also affects to its child divs. that's why you need to use background:rgba(red,green,blue,alpha_value)

You can refer here

answered Nov 19 '16 at 12:53

Bhavin Shah

2,462
4
22
35

How to prevent outer CSS from affecting inner CSS

3 Answers3

How to prevent outer
CSS from affecting inner
CSS