Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用opacity，效果将应用于整个元素，包括子元素和内容。

来自MDN：

[不透明度]适用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，一个元素及其包含的子元素都具有相同的不透明度到元素的背景，即使元素及其子元素不同的不透明度相互之间。

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

rgba()颜色模型允许通过Alpha通道设置opacity。

因此，您可以将父级设置为div { background-color: rgba (255, 255, 255, 0.6); }，这样就可以仅opacity将0.6设置为background-color。子元素不受影响。

点击此处了解详情：A brief introduction to Opacity and RGBA

对于不透明度和图像，请参阅：

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

1 个答案: