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

Posted 2023-03-06

【中文标题】跨浏览器 rgba 透明背景，同时保持内容（文本和图像）不透明

【英文标题】：Cross browser rgba transparent background while keeping content (text & images) non-transparent

【发布时间】：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 或更低版本上工作的证据。

【参考方案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，然后添加适当的透明度