Javascript 跨浏览器 rgba 透明背景，同时保持内容（文本和图像）不透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4792090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross browser rgba transparent background while keeping content (text & images) non-transparent
提问by Mikk
I want to get rgba backgrounds working with all browsers. I did some searching and found out that generally there are three types of browsers out there:
我想让 rgba 背景适用于所有浏览器。我做了一些搜索，发现通常有三种类型的浏览器：
1) Browsers that support rgba.
1) 支持 rgba 的浏览器。
2) Internet Explorer that supports rgba via bizarre '-ms-filter' thing.
2）通过奇怪的'-ms-filter'东西支持rgba的Internet Explorer。
3) Browsers that do not support rgba, but I could use base64 png images with 'data URI scheme'. (Even when browser does not support URI scheme, according to thisit still could be done.)
3) 不支持 rgba 的浏览器，但我可以使用带有“数据 URI 方案”的 base64 png 图像。（即使浏览器不支持 URI 方案，根据this仍然可以完成。）
I have no problems with rgba supporting browsers, and I can get it working with IE, but problem is that I have no idea how to generate client side base64 png images for URI scheme. I really do not want to pregenerate png files, because my rgba values are not constant. I could go with dynamic png generation with php gd library, but I'd really like to do all this on client side. So I'd like to know, is there any good way out there for generating semi-transparent png images with java-script. After this I could just base64 encode them and use them with URI scheme?
我对支持浏览器的 rgba 没有任何问题，我可以让它与 IE 一起使用，但问题是我不知道如何为 URI 方案生成客户端 base64 png 图像。我真的不想预生成 png 文件，因为我的 rgba 值不是恒定的。我可以使用 php gd 库使用动态 png 生成，但我真的很想在客户端完成所有这些。所以我想知道，有没有什么好的方法可以用java脚本生成半透明的png图像。在此之后，我可以对它们进行 base64 编码并将它们与 URI 方案一起使用吗？
Thank you.
谢谢你。
Edit:
编辑：
I want to have semi-transparent div background, while having content fully visible.
我想要半透明的 div 背景，同时让内容完全可见。
回答by thirtydot
See this blog postfor a cross browser method:
.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 browser support
RGBa support is available in: Firefox 3+ Safari 2+ Opera 10
Filters in Internet Explorer are available since Internet Explorer 5.5.
This means that this will work for virtually everyone!
网络浏览器支持
RGBa 支持适用于：Firefox 3+ Safari 2+ Opera 10
Internet Explorer 中的过滤器自 Internet Explorer 5.5 起可用。
这意味着这几乎适用于每个人！
See herefor an easy way to generate the colors for the IE filters.
Doing this should eliminate the need to use "base64 png images with 'data URI scheme'".
这样做应该可以消除使用“带有‘数据 URI 方案’的 base64 png 图像”的需要。
If you really, really want to generate client side .pngimages (I can't see the need for it here):
如果你真的，真的想生成客户端.png图像（我在这里看不到它的需要）：
Generate client-side PNG files using JavaScript.Cool idea, really:
使用 JavaScript 生成客户端 PNG 文件。很酷的主意，真的：
It was once again one of those nights where I hacked like on drugs with no end in sight. Sure, 5 years ago you had loved me with such a project, but in times of HTML5 with the canvas element it is hard to impress you. So take it as proof of creating client side images without canvas, SVG, or server side rendering and AJAX processing.
But how is this possible? Well, I've implemented a client-side JavaScript library like libpng which creates a PNG data stream. The resulting binary data can be appended to the data URI-scheme using Base64 encoding.
这又是一个晚上，我像吸毒一样黑进，看不到尽头。当然，5 年前您曾因为这样的项目而喜欢我，但是在带有 canvas 元素的 HTML5 时代，很难给您留下深刻印象。因此，将其作为无需画布、SVG 或服务器端渲染和 AJAX 处理即可创建客户端图像的证明。
但这怎么可能呢？好吧，我已经实现了一个像 libpng 这样的客户端 JavaScript 库，它创建了一个 PNG 数据流。生成的二进制数据可以使用 Base64 编码附加到数据 URI 方案中。
回答by MatTheCat
I think browsers which don't support rgba don't support base64 neither. However you can simply use a 2x2 px semi-transparent png background image (not 1x1 to avoid a weird bug with IE).
我认为不支持 rgba 的浏览器也不支持 base64。但是，您可以简单地使用 2x2 px 半透明 png 背景图像（不是 1x1 以避免 IE 出现奇怪的错误）。
回答by marta.joed
You can use transparency all the way back to pre-Webkit Safari, IE5, Firefox .9... So old no one uses it. http://css-tricks.com/css-transparency-settings-for-all-broswers/
您可以一直使用透明度回到 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;
}
Of course you can set these css properties on individual elements via your favorite Javascript libraries or by-hand. So as your fallback, set your RBG normally then add the appropriate transparency
当然，您可以通过您最喜欢的 Javascript 库或手动在单个元素上设置这些 css 属性。所以作为你的后备，正常设置你的 RBG 然后添加适当的透明度
