背景的透明度会影响文本

Question

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

正如您所看到的，这正是我想要实现的效果。但由于某些原因，我的CSS确实也影响了文本的不透明度过滤器...
该文本不再是100％白色。有没有办法推翻这种CSS行为？

编辑：应支持IE8 ......

这是我的CSS：

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

Answer 1

这是因为整个元素opacity已被更改，而不仅仅是背景。

如果您只希望background-color不透明，请使用rgba而不是十六进制代码更改该属性的不透明度：

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

---

全班：

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

---

以下显示了支持的浏览器列表：

http://caniuse.com/#search=rgba

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

Answer 2

而不是

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

使用

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

rgba()可在IE>8上使用，仅影响背景，使文字和嵌套元素具有完全不透明度

Answer 3

现代浏览器（IE9 +，FF，Chrome）

使用

为您的背景而不是整个元素提供透明度（正如其他人指出的那样）

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

较旧的浏览器（包括IE7 +）

较旧的浏览器 ^{（属于Microsoft类）} 不支持rgba所以在这种情况下，您可以使用带有Alpha通道的PNG来实现相同的结果（也可以在现代浏览器中使用）：

background-image: url(transBack.png);

您的PNG应为黑色，透明度为50％。

Answer 4

您可能想尝试将背景与文本分开。文本继承了它的父级的不透明度，这是你所面临的问题。要解决此问题，请将背景设置为文本的兄弟。所以，而不是：

// 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 - 这只是为了演示这个概念）