Html 如何获得不透明文本的半透明背景？

我正在尝试这种方法，我只放置了2个div，我设置了第一个样式添加背景并使其半透明，我设置了第一个样式使其不透明：

代码如下：

<div id="container">
    <div id="opaquetext">
      This is a normal text
      on a translucent background
    </div>
</div>

---

我认为它可以工作，但出于某种原因，它也会使文本透明。

使用rgba（）而不是#指定背景。。。或rgb（），其中rgba中的最后一个参数表示背景的不透明度。不透明度用于定义整个元素的不透明度。例如：

background: rgba(255, 0, 0, 0.2)

更多信息：

---

<>但是它可能会增加与旧浏览器和IE的兼容性问题。如果你想支持旧浏览器，你应该考虑使用ButtCalk的回答中指定的透明背景图像。

不透明度样式影响整个元素的显示-它的背景和前景颜色。这些样式也会沿着元素树进行倍增。换句话说，您的内部

div

只是被设置为具有外部

div

的100%不透明度。100%的50%不透明度表示它以与父元素相同的不透明度显示：50%

有两种解决方法，都不需要两个

div

s，这两种方法都允许您像往常一样为文本指定

颜色：#000000

：

• 使用透明背景图像
  IE在IE7之前不支持这一点

• 使用背景色：rgba（255、255、255、0.5）
  IE在IE9之前不支持此功能，Firefox在3.5之前不支持此功能

---

不透明度继承是所有浏览器的标准行为。如果希望在不透明度上继承子div dis，则有两种选择：

在#不透明文本的样式中使用绝对位置：

#opaquetext {
    position: absolute;
    top: 10px;
    left: 10px;
    filter:alpha(opacity=100);  /* worked */
    -moz-opacity:1.0;           /* worked */
    opacity: 1.0;               /* worked */
}

使用照片/图像软件制作具有所需不透明度的背景，并在css中删除不透明度设置

参考：

---

谢谢，我很在乎IE！

#opaquetext {
    position: absolute;
    top: 10px;
    left: 10px;
    filter:alpha(opacity=100);  /* worked */
    -moz-opacity:1.0;           /* worked */
    opacity: 1.0;               /* worked */
}