如何增加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中不透明度的子元素的不透明度？

回答

相關問題