联系我们 更多>>
  • 地址:西安经济技术开发区中环大厦A座18F-A
  • 电话:029-83765753
  • Q Q:374676511
当前位置:首页 >> HTML/CSS >> 正文

ie6下png透明 包括背景图片

来源: 时间:2010-05-06 点击:

核心代码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 &amp; 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 &gt;= 5.5 &amp;&amp; version &lt; 7.0) &amp;&amp; (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") &gt; 0) {
var width = img.width;
var height = img.height;
var sizingMethod = (img.className.toLowerCase().indexOf("scale") &gt;= 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;
}

IE6中PNG图片和PNG背景图片透明的完美解决方法

        IE6中的PNG图片透明的一般解决办法是对于网页中的<img />用JS实现,PNG背景图片则是用滤镜filter实现。这两种方法都有明显的缺点,最为明显的就是PNG做背景图片是不能平铺(repeat)。

         今天在twinhelix上发现了一个好的解决方法:iepngfixiepngfix是利用IE5.5+中的behavior来实现在对HTML文档没有影响的情况下实现IE5.5IE6对PNG图片的支持。

                 1 页面中的PNG图片自动透明

                 2 支持<img src="" />元素

                 3 支持PNG背景图片

                 4 支持CSS1中的背景平铺(repeat)和定位(12px 24px)

                 5 背景图片可以定义在页面内的内联样式中也可在外部样式表中

                 6 支持通过JS改变src或background

                 7 支持元素动态改变类名(className)

        使用方法:按照下面的简单步骤应用到你的页面。

                 1 复制iepngfix.htcblank.gif到你的网站文件夹中

                 2 将下面代码复制到你的HTML或CSS中:                        

<style type="text/css">

img, div { behavior:url(iepngfix.htc); }

</style>

                  CSS选择器(img、div)是指你要应用PNG图片的元素。

                 3 如果你的网站使用子文件夹,用记事本打开iepngfix.htc,修改blankImg变量的路径,例如:

                         IEPNGFix.blankImg="/images/blank.gif“;

                 4 如果你要支持CSS1中的background-repeatbackground-position属性,需要在head中包含iepngfix_tilebg.js

                         <script type="text/javascript" src="iepngfix_tilebg.js"></script>

                 否则背景图片会显示但不会repeat或position

 

         下载地址http://www.twinhelix.com/test/iepngfix.zip.