跨浏览器rgba透明背景,同时保持内容(文本和图像)不透明

Question

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

1)支持rgba的浏览器.

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

3)不支持rgba的浏览器,但我可以使用带有'数据URI方案'的base64 png图像.(即使浏览器不支持URI方案,根据这个它仍然可以这样做.)

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

谢谢.

编辑:

我希望有半透明的div背景,同时内容完全可见.

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过滤器生成颜色的简便方法.

这样做应该不需要使用"base64 png图像和'数据URI方案'".

如果你真的,真的想生成客户端.png图像(我在这里看不到它的需要):

使用JavaScript生成客户端PNG文件.很酷的想法,真的:

这又一次是那些我在黑暗中看到毒品的夜晚.当然,5年前你曾经用这样的项目爱过我,但是在带有canvas元素的HTML5时代,很难给你留下深刻的印象.因此,将其作为创建客户端图像的证明,无需画布,SVG或服务器端渲染和AJAX处理.

但这怎么可能呢？好吧,我已经实现了一个像libpng这样的客户端JavaScript库,可以创建一个PNG数据流.可以使用Base64编码将得到的二进制数据附加到数据URI方案.