欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ie6 png透明 有自己的方法

shiping1 的头像

下面是自己的方法
<!--[if IE 6]>
<SCRIPT type=text/javascript src="{dede:global.cfg_templets_skin/}/js/DD_belatedPNG.js" ></SCRIPT>
<script type="text/javascript" >
    DD_belatedPNG.fix('img,.zhuyeming,');
</script>
<![endif]-->


http://www.wangchao.net.cn/bbsdetail_1884060.html
http://www.unovo.cn/u-development/XHtml/2009/ie6-fix-png.html
http://www.iteye.com/topic/790345
http://www.lanrentuku.com/js/css-713.html

http://www.wangchao.net.cn/bbsdetail_1884060.html
http://www.unovo.cn/u-development/XHtml/2009/ie6-fix-png.html
http://www.iteye.com/topic/790345
http://www.lanrentuku.com/js/css-713.html
 背景透明

 

1)使用 png.js (我改成pngall.js) 这种方法 如果背景是png透明的 就没法变透明了

下面就是png.js (或pngall.js)的代码

/*PNG“科室资讯”图片透明*///只要在html中载入它就可以了,它是img透明 不是背景透明
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
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;
j = j-1;
//alert(strNewHTML);
}
}
}
}

if(document.all)window.attachEvent("onload", correctPNG);

2)使用DD_belatedPNG.js 这种方法 对图像是背景图的png都起作用

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e-xpression,再到javascript+透明GIF替代.
但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.
而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.
同时DD_belatedPNG还支持a:hover属性,以及<img>.

看Demo
原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.
使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:<!--[if IE 6]>
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
<script type="text/javascript"><!
<!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg,');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// -->
3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,
需要以 a:hover 来作为选择器.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
    <script type="text/javascript">
    DD_belatedPNG.fix('.trans,.box a:hover,');
    //不管是背景,还是前景 都应是DD_belatedPNG.fix('.trans,.box a:hover,');这样子的
    </script>
<![endif]-->

其他方案
在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好
Unit PNG Fix
ie7-js
IE PNG Fix
最近我还发现一些很不错很好玩的jQuery插件,接下来也会陆续介绍给大家使用

3)给IE6单独制作一张.gif图片,打上hack (这种方法没试过)

 

                  .image-style{ background:transparent url("filename.png") no-repeat scroll 0 0;

                                       _background-image:url("filename.gif");

                                   }

普通分类: