在保持内容（文本和图像）不透明的情况下，跨浏览器使用rgba半透明背景。

Question

我希望能够使所有浏览器都支持rgba背景。经过搜索，我发现通常有三种类型的浏览器：

1）支持rgba的浏览器。

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

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

我没有遇到rgba支持的浏览器问题，并且我可以在IE上使用它，但问题是我不知道如何生成客户端base64 png图像以用于URI方案。我真的不想预先生成png文件，因为我的rgba值不是恒定的。我可以使用php gd库进行动态png生成，但我真的很想在客户端完成所有这些操作。因此，我想知道是否存在任何良好的方法来使用javascript生成半透明png图像。在此之后，我可以对它们进行base64编码并使用URI方案。

谢谢。

编辑：

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

- Mikk

---

你是想要不透明度还是部分透明？ - Shadow The Spring Wizard

css3pie可能是唯一的答案。这是一个JS库，是的，它很烦人，但到目前为止我还没有看到任何证据表明MS过滤属性在IE8或更低版本上有效。 - Adriano

Answer 1

查看这篇博客文章，了解一种跨浏览器的方法：

.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)";
}

Web浏览器支持

RGBa支持在以下浏览器中可用：Firefox 3+、Safari 2+、Opera 10。

自Internet Explorer 5.5以来，Internet Explorer中的滤镜就提供了支持。

这意味着几乎所有人都可以使用它！

点击此处查看使用IE滤镜生成颜色的简单方法。

这样做应该可以消除使用“带有“data URI方案”的base64 png图像”的必要性。

---

如果您真的非常想生成客户端的.png图片（我在这里看不出有什么需要）：

使用JavaScript生成客户端PNG文件。这是个很酷的想法：

这又是那种毫无头绪地疯狂编码的夜晚之一。当然，5年前你可能会因为这样一个项目而喜欢上我，但在HTML5时代，有了canvas元素，很难打动你了。因此，把它视为在没有canvas、SVG或服务器端渲染和AJAX处理的情况下创建客户端图像的证明吧。

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

- thirtydot

---

没必要使用客户端的base64图片...99%的用户都会得到不错的透明效果。 - kapa

@thirtydot：我已经测试了完全相同的基于RGBA的解决方案，但是针对另一个问题，但是您可以在“结果屏幕截图证明”https://dev59.com/_XRA5IYBdhLWcg3w1BqW#891366中看到它不适用于IE8或IE7。您的代码似乎完全相同，但是您说它适用于IE5.5+，是否有什么遗漏？ - Adriano

@AdrienBe：我猜测BrowserStack的虚拟机不支持使filter工作的任何东西（DirectX？）。我刚刚在真正的IE8上的真实计算机中尝试了您的测试代码，它可以工作。如果我的猜测是正确的，那么BrowserStack没有意识到这一点（或者至少在他们的帮助部分中有一个注释）是令人尴尬的。 - thirtydot

@thirtydot：真烦人！BrowserStack应该为我们提供最好的替代方案（用于快速和轻松的跨浏览器测试）。在怀疑中（是的，我确实怀疑），我还在安装在真实物理机器上的IE8实例上进行了测试，它也起作用了！积极的一面是：这个RGBA解决方案真棒 :) - Adriano

@thirtydot 我创建了一个关于这个主题的问题（使用BrowserStack进行前端跨浏览器测试问题），欢迎您发表您的意见 ;) http://stackoverflow.com/questions/22091638/front-end-development-web-browsers-differences-when-using-browserstack - Adriano

Answer 2

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

- MatTheCat

---

谢谢您的回答。我在我的问题下发布了一篇文章，其中提到有一种解决方案可以处理base64图像（尽管我还没有测试过）。此外，我不想使用预生成/动态（php+gd）png文件，因为我的rgb和alpha值可能会有所变化。 - Mikk

Answer 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，然后添加适当的透明度。

- marta.joed