HTMLで不透明度のある子要素の不透明度をどのように高めますか？

Question

親要素の不透明度を下げた後、子要素の不透明度をinitialまたは1.0に戻すにはどうすればよいですか？子供は透明です。

.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>

私はOpacity bleeding into child divsに

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

ベースを試してみましたが、それはまだ動作しませんでした。

Chromeブラウザ

Answer 1

厳密に言えば、できません。要素の不透明度は、すべての子要素がレンダリングされる方法に影響します。ここでは、背景色のオーバーライドと不透明度の変更を使用した外観の近似を、兄弟要素についてのみ行っています。私は!importantを使用しなければならなかった場所をメモしてください。ブートストラップ（または他のスタイルはここに含まれています）には、より具体的な宣言がいくつかあります。あなただけではあなたがこれを使っているコンテキストに基づいて、より良いセレクタを書くことができるかもしれません。あなたのHTMLが間違っている

.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>