html - 如何使用 CSS 降低元素背景的不透明度？

Question

是否可以仅使用 CSS 使元素的 background 半透明，但元素的内容(文本和图像)不透明？

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

尝试时:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受其父元素的不透明度影响，因此 opacity:1 是相对于父元素的 opacity:0.6 的。

Answer 1

要么使用半透明PNG或 SVG图片或使用 CSS:

background-color: rgba(255, 0, 0, 0.5);

这是一篇来自 css3.info 的文章， Opacity, RGBA and compromise (2007 年 6 月 3 日)。

注意文本仍然是needs sufficient contrast与背景，一旦底层背景闪耀。

---

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>