跨浏览器rgba透明背景，同时保持内容（文字和图片）不透明 [英] Cross browser rgba transparent background while keeping content (text & images) non-transparent
问题描述
我想让rgba背景与所有浏览器。我做了一些搜索，发现一般有三种类型的浏览器有：
1）支持rgba的浏览器。
2）通过bizarre'-ms-filter'支持rgba的Internet Explorer。
3）浏览器不支持rgba， base64 png图像与'数据URI方案'。 （即使浏览器不支持URI方案，根据这它仍然可以做。）
我没有rgba支持浏览器的问题，我可以得到它的工作与IE，但问题是我不知道如何生成客户端base64 png图像的URI方案。我真的不想pregenerate png文件，因为我的rgba值不是常数。我可以去与动态png生成与php gd库，但我真的想在客户端做所有这一切。所以我想知道，有什么好的方法，用于生成半透明png图像与java脚本。之后，我可以只对它们进行base64编码，并用URI方案使用它们。
谢谢。
我想有半透明的div背景，而内容完全可见。
请参阅此博客帖子用于跨浏览器方法：
.alpha60 {
/不支持RGBa * /
background：rgb（0，0，0）;
/ * RGBa与0.6不透明度* /
背景：rgba（0，0，0，0.6）;
/ *对于IE 5.5 - 7 * /
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃99000000，endColorstr =＃99000000）;
/ *对于IE 8 * /
-ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃99000000，endColorstr =＃99000000）;
}
Web浏览器支持
RGBa支持可用：Firefox
3+ Safari 2+ Opera 10
Internet Explorer中的过滤器是$ b $
<$> b
请参阅，以便轻松地为IE过滤器生成颜色。
这样做可以避免使用base64 png images with'data URI scheme' 。
如果真的，真的想要生成客户端 .png 图片（我在这里看不到需要）：
这是一次又一次的夜晚
，在那里，我像在没有
结束的毒品一样。当然，5年前你
爱我这样的项目，但
在HTML5的时代与画布
元素是很难打动你。所以
把它作为创建客户端的例证证明没有画布，SVG或
服务器端渲染和AJAX
处理的侧面图像
。
$ b b但是这怎么可能呢？好吧，我有
实现了一个客户端JavaScript
库libpng创建一个
PNG数据流。所得到的二进制
数据可以使用Base64编码附加到数据
URI-方案。
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:
1) Browsers that support rgba.
2) Internet Explorer that supports rgba via bizarre '-ms-filter' thing.
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 this it still could be done.)
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?
Thank you.
Edit:
I want to have semi-transparent div background, while having content fully visible.
See this blog post for 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!
See here for 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'".
If you really, really want to generate client side .png images (I can't see the need for it here):
Generate client-side PNG files using JavaScript. Cool idea, really:
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.
这篇关于跨浏览器rgba透明背景，同时保持内容（文字和图片）不透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
