0

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

background: none repeat scroll 0 0 #205081;

css2有可能吗？否则我怎样才能从 css3 那里添加不透明度声明？

4

2 回答 2

2

使用rgba()。在你的情况下

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

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

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

于 2013-02-12T10:23:32.850 回答
1

遗憾的是，由于全球有各种版本和浏览器类型，没有一个 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 与不透明度一起使用，但您只能在最坏的情况下使用它而不加载它当使用较新的浏览器时。

于 2013-02-12T10:45:16.320 回答