跨浏览器 rgba 透明背景，同时保持内容（文本和图像）不透明答案

【问题标题】：Cross browser rgba transparent background while keeping content (text & images) non-transparent跨浏览器 rgba 透明背景，同时保持内容（文本和图像）不透明
【发布时间】：2011-06-15 02:14:27
【问题描述】：

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

1) 支持 rgba 的浏览器。

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

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

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

谢谢。

编辑：

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

【问题讨论】：

您是想要不透明还是部分透明？
css3pie 可能是唯一的答案。这是一个 JS 库，是的，这很烦人，但到目前为止，我还没有看到任何 MS 过滤器属性在 IE8 或更低版本上工作的证据。

标签： javascript css cross-browser rgba

【解决方案1】：

See this blog post 用于跨浏览器方法：

.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 起可用。

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

See here 为 IE 过滤器生成颜色的简单方法。

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

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

Generate client-side PNG files using JavaScript. 好主意，真的：

又是那些夜晚之一我在没有毒品的情况下像毒品一样被砍尽在眼前。当然，5年前的你曾经用这样一个项目爱过我，但是在 HTML5 时代与画布元素很难打动你。所以将其作为创建客户的证明没有画布、SVG 或服务器端渲染和 AJAX 处理。

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

【讨论】：

谢谢，但我关心的部分是“不支持 RGBa 的 Web 浏览器的后备”。我想也许它仍然可以通过 URI 方案来完成。也许我太担心人们使用旧浏览器了？
+1 不需要那些客户端 base64 图像...无论如何，99% 的用户都会获得不错的不透明度。
为什么这被否决了，:S？据我所知，任何支持数据 URI 的浏览器都已被此方法覆盖。
原来你根本没有回答这个问题。我看到你现在更新了帖子，所以我取消了反对票并 +1。
@Jakub Hampl：很公平。与第一个版本相比，这篇文章确实有了很大的改进。

【解决方案2】：

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

【讨论】：

感谢您的回答。我在我的问题下发布了一篇文章，指出有一种针对 base64 图像的解决方法（虽然尚未测试）。另外，我不想使用预生成/动态 (php+gd) png 文件，因为我的 rgb 和 alpha 值可能会有所不同。

【解决方案3】：

您可以一直使用透明度回到 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，然后添加适当的透明度

【讨论】：