How do you increase the opaqueness of a child element with opacity in HTML?

Question

How do I set the opacity of a child element back to initial or 1.0 after the parent element's opacity is reduced? The child remains transparent.

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

I tried

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

base on Opacity bleeding into child divs, but it still didn't work.

Chrome Browser

Note that your html is incorrect, you are closing one more div that than you should. Had to recheck this statement because the indentation didn't help lol. — Isac, Jun 18 '17 at 22:20
You can checkout [this](https://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div) thread, it might help you. — Karan Hudia, Jun 19 '17 at 06:13

jack · Accepted Answer · 2017-06-18T23:10:18.040

Strictly speaking, you can't. The opacity of an element affects how all its child elements are rendered. Here's an approximation of the look using some background-color overrides and opacity changes only for sibling elements. Take note of the places where I had to use !important. Bootstrap (or other styles being included here) has some declarations that are more specific; you may be able to just write better selectors based on the context you're using this in.

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

How do you increase the opaqueness of a child element with opacity in HTML?

1 Answers1