【问题标题】：How to add opacity on background?如何在背景上添加不透明度？
【发布时间】：2013-02-12 10:19:07
【问题描述】：

如何为以下 CSS 语句添加不透明度？

background: none repeat scroll 0 0 #205081;

css2 有可能吗？否则如何从那里添加 css3 的不透明度声明？

【问题讨论】：

请记住，RGB 背景不适用于旧版本的 IE，如果您想要一个适合所有人的解决方案，请告诉我。
嗯，我还不知道。如果您有时间，您可以添加一个完整的示例，以便在此处收集所有内容以供参考，也可供其他人参考。

标签： css

【解决方案1】：

使用 rgba()。你的情况

背景：rgba(32, 80, 129, 1)

最后一个数字是不透明度。 1 表示完全不透明，0 表示不可见。因此，如果您想要 50% 的不透明，它将是

背景：rgba(32, 80, 129, 0.5)

【讨论】：

太好了，这可能就是我想要的。

【解决方案2】：

遗憾的是，由于全球有各种版本和浏览器类型，没有一个 CSS 条目可以在没有 JavaScript 干预的情况下在所有浏览器上兼容。但是，您可以使用多种样式技术，并在头部使用“if IE 7”HTML 来解决不喜欢现代代码的浏览器。

以下是您应该考虑的各种方法，以实现跨浏览器的最大兼容性。

为旧版浏览器添加替代方法

如果您想在 Internet Explorer 的更高版本中使用透明背景，最简单的方法是使用旧代码为旧版本的浏览器设置样式。您可以通过在

中添加以下代码来过滤样式规则

<head>
</head>

HTML 或 PHP 文件的部分。

头部内的 HTML

如果您还没有以下代码，您应该添加它。现在的许多框架和 CMS 都包含此内容，因此只需在编辑前查看源代码，如果还没有，则仅添加。

<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]-->

制作一个透明的 50% PNG 文件

只需加载任何 photoshop 或任何好的替代品并制作一个 1x1 像素的新文件，然后添加一个新图层并删除背景。然后在图层内填充您要使用的颜色，然后使该图层不透明度为 50%。然后将其保存为 PNG 并上传到您的主机。如果您担心页面的加载时间，那么您可以使用 PNGCrush 或 Smush.it 将该 PNG 压缩到小于 0.5kb。

在您的 CSS 中添加此内容（您需要使用 IF 7 / 6 等）

.ie6, .ie7, .ie8 .your-div-class-or-id {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale');
}

}

适用于较新浏览器的 CSS

您应该尽可能为较新的浏览器使用较新的代码，并且不使用 PNG 来提供透明背景，这意味着我们不会通过添加文件获取来增加页面加载时间。只需添加：

background: rgba(32, 80, 129, 0.5)

适用于现代浏览器，例如 IE9+、Firefox、Chrome、Safari

你应该结合使用现代和旧的 CSS

请注意，您同时使用了 RGBA 和 AlphaImageloader 这两个 CSS 元素，因此 png 文件仅在绝对需要时才使用，我知道很多人不赞成将 PNG 与不透明度一起使用，但您只能在更坏的情况下使用它，并且使用较新的浏览器时不加载它。

【讨论】：