html - 子元素继承父元素的不透明度

Question

我在网页上工作，我想在显示背景图像的透明 div 上放置一个按钮。但是当我放置按钮时它也是透明的。我怎样才能让它不透明？

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    <input type="button" value="Ok">

  </div>
</div>

Answer 1

使用rgba() 颜色方法代替opacity:

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid black;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    <input type="button" value="Ok">
  </div>
</div>

与 opacity ，效果适用于整个元素，包括子元素和内容。

来自 MDN :

[Opacity] applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

此规则的异常(exception)是使用 rgba() 设置的 background-color。

rgba() 颜色模型允许通过 alpha channel 设置不透明度。

所以你可以将父级设置为 div { background-color: rgba (255, 255, 255, 0.6); }，这将单独在 background-color 上将 opacity 设置为 0.6。子元素将不受影响。

在这里了解更多:A brief introduction to Opacity and RGBA

对于不透明度和图像，请参见:

• Can I set an opacity only to the background image of a div?
• CSS: set background image with opacity?