html - 如何在 HTML 中增加具有不透明度的子元素的不透明度？

Question

<分区>

Answer 1

严格来说，你不能。元素的不透明度会影响其所有子元素的呈现方式。这是仅对 sibling 元素使用一些背景颜色覆盖和不透明度更改的近似外观。记下我必须使用 !important 的地方。 Bootstrap(或此处包含的其他样式)有一些更具体的声明；您也许可以根据您在其中使用它的上下文编写更好的选择器。

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