如何增加HTML中不透明度的子元素的不透明度？

父元素的不透明度降低后，如何将子元素的不透明度设置为initial或1.0？孩子保持透明。如何增加HTML中不透明度的子元素的不透明度？

.user-edit2 { 
 
    background-color: red; 
 
    background-size: cover; 
 
} 
 

 
.card { 
 
    opacity: 0.6; 
 
} 
 

 
.form-control { 
 
    background-color: #666; 
 
    opacity: 1.0; 
 
    color: white; 
 
} 
 

 
.form-control:hover { 
 
    background-color: #333; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="user-edit2"> 
 
    <h2>Member Profile</h2> 
 
    <form> 
 
    <div class="card"> 
 
     <div class="card-header">Personal Details</div> 
 
     <div class="card-block"> 
 
     <div class="card-text"> 
 
      <div class="row"> 
 
      <div class="col-md-3"> 
 
       <input placeholder="Name" class="form-control" type="text"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <br> 
 
    <p><input type="submit" name="commit" value="Save" class="btn btn-primary" data-disable-with="Save"></p> 
 
    </form> 
 
</div>

我试图

.card { 
    /*opacity: 0.6;*/ 
    background-color: rgba(255, 255, 255, 0.6); 
}

基础上Opacity bleeding into child divs，但它仍然没有奏效。

Chrome浏览器

来源

2017-06-18 Chloe

请注意，您的HTML是不正确，你关闭一个多格比你应该就是。必须重新检查这个陈述，因为缩进没有帮助大声笑。 – Isac

您可以结帐[this]（https://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div）线程，它可能会帮你。 –

严格来说，你不能。元素的不透明度会影响其所有子元素的呈现方式。以下是使用一些背景颜色覆盖和不透明度更改的近似效果，仅适用于兄弟元素。记下我必须使用的地方!important。引导程序（或其他包含在这里的样式）有一些更具体的声明;你可以只写基于上下文更好选择你使用这。

.user-edit2 { 
 
    /* for solid colors, you can use rgba to simulate transparency without affecting contents */ 
 
    background: rgba(255,0,0,0.6) !important; 
 
} 
 

 
.user-edit2 .card-header, 
 
.user-edit2 .card { 
 
    /* these have background-colors declared somewhere else, so... */ 
 
    background: transparent !important; 
 
} 
 

 
/* You could also use an rgba value for color here, 
 
or a non-transparent color that's a mix of black and red. Did this cause it's fast. */ 
 
.user-edit2 .card-header, 
 
.user-edit2 h2 { 
 
opacity: 0.6; 
 
} 
 

 
/* Note - these styles aren't being applied. Not specific enough maybe? Try scoping them as seen above. */ 
 
.form-control { 
 
    background-color: #666; 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="user-edit2"> 
 
    <h2>Member Profile</h2> 
 
    <form> 
 
    <div class="card"> 
 
     <div class="card-header">Personal Details</div> 
 
     <div class="card-block"> 
 
     <div class="card-text"> 
 
      <div class="row"> 
 
      <div class="col-md-3"> 
 
       <input placeholder="Name" class="form-control" type="text"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<br> 
 
<p><input type="submit" name="commit" value="Save" class="btn btn-primary" data-disable-with="Save"></p> 
 
</form> 
 
</div>

来源

2017-06-18 23:04:32 jack

如何增加HTML中不透明度的子元素的不透明度？

回答

相关问题