如何使用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图片或使用CSS 3：

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

<p style="background-color: rgba(255, 0, 0, 0.5);">

  <span>Hello, World!</span>

</p>