css - 背景透明度影响文本

Question

在我的网站上，我有一个 slider ，上面放置了一些文本。我给文本设置了黑色透明背景，这样会更容易阅读。

正如你所看到的，这正是我想要达到的效果。但由于某种原因，我的 CSS 确实也通过它的不透明度过滤器影响了文本......
文本不再是 100% 白色。有没有办法覆盖这种 CSS 行为？

编辑:应该支持 IE8...

这是我的 CSS:

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

Answer 1

那是因为整个元素不透明度都已更改，而不仅仅是背景。

如果您只希望 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 半透明图像并将其用作背景图像。它并不整洁，但它是旧浏览器的解决方案。