Question

我将.jumbotron类的不透明度设置为opacity: 0.9;，并将其子元素贯彻执行。在这种情况下，如何设置特定子元素以覆盖父级属性值。我尝试使用!important，.jumbotron a，.jumbotron p + p，.jumbotron nth:child(3)，但这些都没有完全发挥作用。它会将按钮更改为低于0.9的较低不透明度，但不会为1，它会假定为实体或换句话说不显示透明度。有没有其他方法可以解决这个问题？这是我尝试使用的焦点代码：

CSS：

.jumbotron{
        background-color: white;
        color:black;
        opacity:0.9;
        border-radius:0px 0px 10px 10px;
    }
.jumbotron a, .jumbotron p + p, .jumbotron :nth-child(3){
        opacity: 1 !important;
    }

HTML：

<div class="jumbotron">
  <h1 style="color:black;">Welcome!</h1>
  <p>We're an awesome company that creates virtual things for portable devices.</p>
  <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
</div>

解决方法解决方案：

当已设置父元素值时，您似乎无法将不透明度值覆盖到子元素。例如，.jumbotron（父级）设置为opacity:0.9，.jumbotron p + p（第二个子元素）[或其他用于覆盖值的其他]设置为opacity: 1 !important如上面的代码所示，将无法工作！设置它＆lt; 1会起作用。但是，对于其他css属性，例如color，margin等，它将覆盖。话虽如此，一个解决方法是专门从.jumbotron中取出按钮并使用适当的css属性创建一个新的div，如下所示：

#divbtn{ 
        position:absolute; /*type of position to freely move the element about*/
        top:290px;
        margin-left:30px;
    }

<!--opacity cannot be overridden on a child element when the parent's element is set, so I made a new div outside of .jumbotron and make it appear as if it's in .jumbotron without opacity being affected.-->
<div id="divbtn">
   <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
</div>

Answer 1

我建议给jumbotron类中的每个元素一个公共类。例如，如果要将类命名为class_name，则css将为 -

.class_name{
            opacity:1;
           }

如果您不理解我的答案，或者这并没有解决您的问题，请在下方发表评论。

Answer 2

孩子将始终从其父级继承不透明度。这意味着您无法为子元素设置不同的不透明度。

另一种解决方案是使用opacity方法，而不是使用rgba。

然而，这是一种解决方法，看看，可能适合您。查看 DEMO 。

.jumbotron{
       background-color: white;
       color:black;
       border-radius:0px 0px 10px 10px;
       position: relative;  
       width:100%;   
    }

.container {   
    position:relative; 
    width:100%;   
}  
.holder {  
    position:absolute;  
    top:0;  
    bottom:0;
    left:0;  
    width:100%;  
    background-color:#FFF;  
    opacity: 0.5;  
    -moz-opacity: 0.5;  
    filter:alpha(opacity=50); 
    z-index:1;

}  
.jumbotron p:last-of-type{ 
    position: relative;  
    width:100%;  
   z-index:2;
   opacity: 1;  
   filter:alpha(opacity=100); 
}

如何覆盖父级的css属性并将其应用于特定的子元素属性？

2 个答案: