如何使用CSS为文本或图像提供透明背景？

Question

如何使用CSS为文本或图像提供透明背景？是否可以，仅使用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

这是我能想到的最好的解决方案，而不是使用CSS 3.就我所见，它在Firefox，Chrome和Internet Explorer上运行良好。

将容器DIV和两个子DIV放在同一级别，一个用于内容，一个用于背景。使用CSS，自动调整背景大小以适应内容，并使用z-index将背景实际放在后面。

 .container {

      position: relative;

    }

    .content {

      position: relative;

      color: White;

      z-index: 5;

    }

    .background {

      position: absolute;

      top: 0px;

      left: 0px;

      width: 100%;

      height: 100%;

      background-color: Black;

      z-index: 1;

      /* These three lines are for transparency in all browsers. */

      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

      filter: alpha(opacity=50);

      opacity: .5;

    }

<div class="container">

  <div class="content">

    Here is the content.

    <br />Background should grow to fit.

  </div>

  <div class="background"></div>

</div>