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

我想让rgba背景与所有浏览器一起工作。我做了一些搜索，发现一般有三种类型的浏览器：

1） 支持rgba的浏览器

2） Internet Explorer通过奇怪的'-ms过滤器'支持rgba

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

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

多谢各位

编辑：

---

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

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

对于跨浏览器方法：

.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+狩猎2+歌剧10

Internet Explorer中的筛选器是 从Internet Explorer 5.5开始提供

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

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

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

---

如果您真的非常想生成客户端

.png

图像（我看不出这里需要它）：

好主意，真的：

又是一个这样的夜晚 在那里，我喜欢在没有毒品的情况下吸毒 终点在望。当然，5年前你 我喜欢这样一个项目，但是 在使用画布的HTML5时代 很难给你留下深刻印象。所以 以此作为创建客户机的证据 没有画布、SVG或 服务器端渲染和AJAX 处理

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

---

你可以一直使用透明度，回到Webkit之前的Safari、IE5、Firefox.9。。。这么老了，没人用它。

当然，您可以通过自己喜欢的Javascript库或手动在单个元素上设置这些css属性。

---

因此，作为备用方案，请正常设置RBG，然后添加适当的透明度

您是否尝试使用不透明度或部分透明度？css3pie可能是唯一的答案。这是一个JS库，是的，这很烦人，但到目前为止，我还没有看到任何关于IE8或以下版本的MS过滤器属性的证据。谢谢你的回答。我在我的问题下发表了一篇文章，指出base64图像有一个解决方案（但尚未测试）。另外，我不想使用预生成/动态（php+gd）png文件，因为我的rgb和alpha值可能会有所不同。谢谢，但我关心的是“不支持RGBa的web浏览器的回退”。我想也许它仍然可以通过URI方案来实现。也许我太担心使用旧浏览器的人了？+1不需要那些客户端base64图像。。。99%的用户无论如何都会得到很好的不透明度。为什么会被否决，：S？据我所知，任何支持数据URI的浏览器都已经包含在这个方法中了。最初你只是没有回答这个问题。我看到你现在更新了帖子，所以我取消了否决票和+1。@Jakub-Hampl：很公平。自从第一个版本以来，这篇文章确实有了很大的改进。

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