核心代码CSS:
- {filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )}
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
已知问题:
滤镜会使图片覆盖在文本层之上,使超链接和按钮等失效。并没有设置为背景的选项。
尚不完美的解决方法:
将div、链接或按钮设置相对位置,使之浮动。
1.此法文字仍会显示为在半透明下的模糊效果。
2.div/label/gridview等长度的变化将不会引起容器长度的自动适应。
摘几段代码和方法:
把下面的代码放在head区就可以解决问题了。
<!--[if gte IE 5.5000]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->
pngfix.js文件的程序代码
- function correctPNG()
- {
- for(var i=0; i<document.images.length; i++)
- {
- 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 + "px; height:" + 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);
另一个官方解决方案的核心函数
- /*
- Correctly handle PNG transparency in Win IE 5.5 & 6.
- Copyright 2007 Ignia, LLC
- Based in part on code from from http://homepage.ntlworld.com/bobosola.
- Use in with DEFER keyword wrapped in conditional comments:
- <script type="text/javascript" defer="true" src="pngfix.js"></script>
- */
- function fixPng() {
- var arVersion = navigator.appVersion.split("MSIE")
- var version = parseFloat(arVersion[1])
- if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
- for(var i=0; i<document.images.length;></document.images.length;> var img = document.images[i];
- var imgName = img.src.toUpperCase();
- if (imgName.indexOf(".PNG") > 0) {
- var width = img.width;
- var height = img.height;
- var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
- img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
- img.src="images/blank.gif" mce_src="images/blank.gif";
- img.width = width;
- img.height = height;
- }
- }
- }
- }
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>),而IE不识别(包括IE7),所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
html>body #png {background: url(images/bg.png) repeat;}
而对于IE,我们都通过滤镜的方法来定义,或许有人问,IE7不是支持PNG透明图片吗?是的,不错,IE7是支持PNG透明图片,但IE7也支持AlphaImageLoader滤镜,为了避免使用PNG图片和滤镜冲突造成的不便,我们统一在IE中使用AlphaImageLoader滤镜。我们通过只有IE才识别的通配符(*),来定义IE浏览器中的滤镜。如下:
- * html #png {
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
- background:none;
- }
- html>body #png {background: url(images/bg.png) repeat;}
- html #png {
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/bg.png");
- background:none;
- }
http://dean.edwards.name/IE7/
http://code.google.com/p/ie7-js/
http://dean.edwards.name/weblog/2008/01/ie7-2/
代码原理都是滤镜,都无法正确处理背景.