IE系列的PNG问题是一个广受诟病、由来已久、至今未较好解决的问题,从IE6的不支持到IE7/8的缺陷支持,算是有所进步,但还有很多不健全。比如大家可以试试当PNG遭遇filter:alpha的情况,非常奇怪的现象,PNG在IE7下出现黑色背景。
这个在蓝色经典上有朋友说明了该问题,“出现背景变黑应该是给整个窗体设置了透明度导致,那么对于IE7(可能还包括IE8)来说,它虽然提供了对半透明PNG的支持,但这种支持是不健全的。这种不健全的一种表现就是,当你为半透明PNG图片(或使用半透明PNG作为背景的元素)设置透明度时,PNG图片的半透明部分会显示为黑色(但不透明部分的显示是正常的)。
值得一提的是,IE 实现透明度是通过其私有的 CSS 滤镜的方式,而非标准的 CSS3 属性。而且IE透明滤镜本身就是存在 bug 的,当然这里就不多说了”
=====================
IE7/IE8对PNG透明支持是有问题的.
所以能不使用透明,尽量不使用.
在ie6下PNG图片背景不透明.在有PNG的图片的页面中加入下面代码试试
function correctPNG()
{
var isIE=!!window.ActiveXObject
var isIE6=isIE&&!window.XMLHttpRequest
if (isIE){
if (isIE6){
for(var i=0i<document.images.lengthi++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block" + img.style.cssText
if (img.align == "left") imgStyle = "float:left" + imgStyle
if (img.align == "right") imgStyle = "float:right" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "pxheight:" + img.height + "px" + imgStyle + ""
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale')\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
} }}
}
window.attachEvent("onload", correctPNG)
将一个特定页面抓取为一张png图片的最简单的方法是使用CutyCapt,这是一种在Linux下的方便地将HTML网页转化成矢量图形和位图图像格式的命令行工具(比如,SVG, PDF, PS, PNG, JPEG, TIFF, GIF)。CutyCapt内部使用WebKit渲染引擎来导出网页渲染输出到图片文件中。它使用Qt构建,CutyCapt实际上是一个也可以在Windows上使用的跨平台应用。