12

我想让 rgba 背景适用于所有浏览器。我做了一些搜索，发现通常有三种类型的浏览器：

1) 支持 rgba 的浏览器。

2) 通过奇怪的“-ms-filter”东西支持 rgba 的 Internet Explorer。

3) 不支持 rgba 的浏览器，但我可以使用带有“数据 URI 方案”的 base64 png 图像。（即使浏览器不支持 URI 方案，根据这个它仍然可以完成。）

我对支持 rgba 的浏览器没有任何问题，我可以让它与 IE 一起使用，但问题是我不知道如何为 URI 方案生成客户端 base64 png 图像。我真的不想预先生成 png 文件，因为我的 rgba 值不是恒定的。我可以使用 php gd 库进行动态 png 生成，但我真的很想在客户端完成这一切。所以我想知道，有没有什么好的方法可以用java-script生成半透明的png图像。在此之后，我可以对它们进行 base64 编码并将它们与 URI 方案一起使用吗？

谢谢你。

编辑：

我想要半透明的 div 背景，同时让内容完全可见。

4

3 回答 3

36

有关跨浏览器方法，请参阅此博客文章：

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

网络浏览器支持

RGBa 支持适用于：Firefox 3+ Safari 2+ Opera 10

Internet Explorer 中的过滤器从 Internet Explorer 5.5 开始可用。

这意味着这几乎适用于所有人！

请参阅此处了解为 IE 过滤器生成颜色的简单方法。

这样做应该消除使用“带有'数据URI方案'的base64 png图像”的需要。

如果您真的非常想生成客户端.png图像（我在这里看不到它的需要）：

使用 JavaScript 生成客户端 PNG 文件。很酷的想法，真的：

这又是一个晚上，我像吸毒一样疯狂，看不到尽头。当然，5 年前你就喜欢我这样的项目，但在 HTML5 的 canvas 元素时代，很难给你留下深刻印象。因此，将其作为创建客户端图像的证据，无需画布、SVG 或服务器端渲染和 AJAX 处理。

但这怎么可能？好吧，我已经实现了一个像 libpng 这样的客户端 JavaScript 库，它创建了一个 PNG 数据流。生成的二进制数据可以使用 Base64 编码附加到数据 URI 方案中。

于 2011-01-25T10:10:19.190 回答
0

我认为不支持 rgba 的浏览器也不支持 base64。但是，您可以简单地使用 2x2 像素的半透明 png 背景图像（不是 1x1 以避免 IE 出现奇怪的错误）。

于 2011-01-25T10:05:23.083 回答
-1

您可以一直使用透明度回到 Webkit 之前的 Safari、IE5、Firefox .9... 太老了，没有人使用它。 http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

当然，您可以通过自己喜欢的 Javascript 库或手动在单个元素上设置这些 css 属性。因此，作为您的后备，请正常设置您的 RBG，然后添加适当的透明度

于 2012-07-13T19:42:27.320 回答