2

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

在此处输入图像描述

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

编辑：应该支持 IE8...

这是我的 CSS：

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

4 回答 4

3

那是因为整个元素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. 它不整洁，但它是旧浏览器的解决方案。

于 2013-01-24T09:41:28.383 回答
1

代替

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

利用

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

rgba()可用IE>8且仅影响背景，使文本和嵌套元素完全不透明

于 2013-01-24T09:40:13.560 回答
0

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

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

于 2013-01-24T09:51:28.907 回答
0

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

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

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

旧版浏览器（包括 IE7+）

较旧的浏览器（Microsoft 类型）不支持rgba，因此在这种情况下，您可以使用带有 alpha 通道的 PNG 来实现相同的结果（并且也可以在现代浏览器中使用）：

background-image: url(transBack.png);

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

于 2013-01-24T09:44:49.067 回答