html中png图片加上filter属性后透明效果失效是怎么回事?

html-css024

html中png图片加上filter属性后透明效果失效是怎么回事?,第1张

当PNG遭遇filter:alpha

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上使用的跨平台应用。