如何防止外部 <div> CSS 影响内部 <div> CSS

Question

我已将外包装的不透明度设置为 (0.5)。然而，这也将所有内部元素的不透明度设置为 (0.5)。我怎样才能使内部元素的不透明度为 1？谢谢！

//..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;
}

Answer 1

您应该为 nav-wrapper 使用 rgba 背景而不是不透明度

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

Answer 2

你不能。这不是不透明度的工作原理。请改用 background: rgba(255,255,255,0.5);。（rgba(); 是具有 RGB 和不透明度的颜色）

Answer 3

这里是JSFiddle

当您将 background 和 opacity 属性给父 div 时，它也会影响其子 div。这就是为什么你需要使用 background:rgba(red,green,blue,alpha_value)

可以参考here

如何防止外部 <div> CSS 影响内部 <div> CSS

How to prevent outer <div> CSS from affecting inner <div> CSS

html

css

opacity