Css 背景透明度会影响文本

在我的网站上，我有一个滑块，上面有一些文字。我给了这篇文章一个黑色透明的背景，所以它会更具可读性

正如你所看到的，这正是我想要达到的效果。但是由于某些原因，我的CSS也会影响文本的不透明度过滤器。。。 文本不再是100%白色。有没有办法否决这种CSS行为

编辑：应该支持IE8

这是我的CSS：

.front-slider-body {
  background-color: #000;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

而不是

background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;

使用

rgba在IE>8上可用，只影响背景，使文本和嵌套元素完全不透明度，而不是

background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;

使用

---

rgba在IE>8上可用，只会影响背景，使文本和嵌套元素完全不透明度

这是因为整个元素的不透明度已经改变，而不仅仅是背景

如果只希望背景颜色不透明，请使用rgba而不是十六进制代码更改该属性的不透明度：

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

全班：

.front-slider-body {
  background-color: rgba(0,0,0, 0.5);
  zoom: 1;
}

以下显示了中支持此功能的浏览器列表：

---

如果您需要支持较旧的浏览器，那么我建议您创建一个1px*1px半透明图像，并将其用作背景图像。它不整洁，但它是旧浏览器的解决方案。

这是因为整个元素的不透明度已经改变，而不仅仅是背景

如果只希望背景颜色不透明，请使用rgba而不是十六进制代码更改该属性的不透明度：

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

全班：

.front-slider-body {
  background-color: rgba(0,0,0, 0.5);
  zoom: 1;
}

以下显示了中支持此功能的浏览器列表：

如果您需要支持较旧的浏览器，那么我建议您创建一个1px*1px半透明图像，并将其用作背景图像。它不整洁，但它是旧浏览器的解决方案。

现代浏览器IE9+、FF、Chrome 仅为您的背景提供透明度，而不是像其他人通过使用

background-color: rgba(0, 0, 0, .5);

包括IE7在内的旧浏览器+ Microsoft类型的旧浏览器不支持rgba，因此在这种情况下，您可以将PNG与alpha通道一起使用，以实现相同的效果，并且也适用于现代浏览器：

background-image: url(transBack.png);

PNG应为黑色，透明度为50%。

现代浏览器IE9+、FF、Chrome 仅为您的背景提供透明度，而不是像其他人通过使用

background-color: rgba(0, 0, 0, .5);

包括IE7在内的旧浏览器+ Microsoft类型的旧浏览器不支持rgba，因此在这种情况下，您可以将PNG与alpha通道一起使用，以实现相同的效果，并且也适用于现代浏览器：

background-image: url(transBack.png);

---

PNG应为黑色，透明度为50%。

您可能需要尝试将背景与文本分开。文本继承其父对象的不透明度，这是您面临的问题。要解决此问题，请将背景设置为文本的同级。因此，不是：

// Just example layout
<div id="container" style="background: #000; opacity: 0.5;">
    Your Text
</div>

您可以尝试：

<div id="container" style="position: relative;">
    <div id="background" style="position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.5;" ></div>
    <div id="text">Your Text</div>
</div>

---

显然，您应该使用类和更多跨浏览器兼容的CSS-这只是为了演示您可能想要尝试将背景与文本分离的概念。文本继承其父对象的不透明度，这是您面临的问题。要解决此问题，请将背景设置为文本的同级。因此，不是：

// Just example layout
<div id="container" style="background: #000; opacity: 0.5;">
    Your Text
</div>

您可以尝试：

<div id="container" style="position: relative;">
    <div id="background" style="position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.5;" ></div>
    <div id="text">Your Text</div>
</div>

---

显然，您会使用类和更符合跨浏览器的CSS-这只是为了演示概念

请同时添加标记，了解处理的DOM结构非常有帮助。请同时添加标记，了解处理的DOM结构非常有帮助。这意味着也将支持IE8？或者只支持IE8？IE>8表示IE9和IE10。在IE8和更老版本上，您仍然需要使用过滤器作为后备，或者使用透明png作为背景，这意味着IE8也将得到支持？或者只支持IE8？IE>8表示IE9和IE10。在IE8和更早版本上，您仍然需要使用过滤器作为回退或透明png作为背景