子元素继承父级的不透明度

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]适用于整个元素,包括其内容,即使该值不是由子元素继承的.因此,元素及其包含的子元素相对于元素的背景具有相同的不透明度,即使元素及其子元素相对于彼此具有不同的不透明度.

此规则的例外情况background-color设置为rgba().

所述rgba()颜色模型允许opacity经由alpha通道来设置.

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

点击此处了解更多信息:Opacity和RGBA简介

对于不透明度和图像,请参阅:

• 我可以仅将不透明度设置为div的背景图像吗？
• CSS:设置不透明度的背景图像？