Html 如何防止外部<；部门>；CSS不影响内部<；部门>；CSS

我已将外层包装的不透明度设置为（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;
}

/…HTML//
//…CSS//
.圆圈1{
宽度：80px；
高度：80px；
边界半径：50%；
背景:#BBBBBB；
}
.导航包装器{
身高：100%；
宽度：100%；
排名：0；
不透明度：0.5；
背景：白色；
}

导航包装器应使用rgba背景，而不是不透明度

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

---

你不能。这不是不透明的工作原理。使用背景：rgba（255255,0.5）取而代之。（

rgba（）；

是带有RGB和不透明度的颜色）

这里是

当您将

background

和

opacity

属性赋予父div时，它也会影响其子div。这就是为什么需要使用背景：rgba（红、绿、蓝、alpha_值）

---

您可以参考白色元素上为什么不透明度的可能重复？有背景图像吗？有了你的代码，就不需要不透明了，我不知道这些术语，所以我找不到重复的帖子。