Question

我已将外包装的不透明度设置为（0.5）。然而，这设置了所有内在元素＆＃39;不透明度（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。这就是为什么你需要使用背景：rgba（红色，绿色，蓝色，alpha_value）

您可以参考here

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

3 个答案: