Question

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

1）支持rgba的浏览器。

2）通过奇怪的'-ms-filter'事物支持rgba的Internet Explorer。

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

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

谢谢。

编辑：

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

Answer 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过滤器的颜色。

这样做不需要使用“base64 png图像和'数据URI方案'”。

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

Generate client-side PNG files using JavaScript.很酷的想法，真的：

这是那些夜晚之一   在哪里我像没有药物的黑客一样   结束了。当然，5年前你   我喜欢这样一个项目，但是   在带有画布的HTML5时代   元素很难给你留下深刻的印象。所以   把它作为创建客户的证据   没有画布，SVG或者的侧面图像   服务器端渲染和AJAX   处理

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

Answer 2

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

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

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

3 个答案: