首页 > 电脑专区 > 电脑教程 >

IE6浏览器下图片及背景图片透明的终极解决办法

来源:互联网 2023-02-21 22:38:17 255

网页制作中,众所周知,IE6的bug及兼容性是最令人头疼的事情,在IE6下让PNG图片透明或者元素背景图片透明很麻烦,最近项目开发过程中,遇到了这样的需求,用原来微软给出的解决方式,给每个用到图片的地方手动加上filter:progid:DXImageTransform.Microsoft.AlphaImageLoader这个属性的办法已经不能完全满足我们的需求,甚至偶尔在某些情况下会失效,经过不断地研究和测试,终于找到了更为方便实用的解决方式,可以让原来麻烦的IE6图片透明问题以及IE6元素加了透明图片链接失效的问题迎刃而解,还望大家多多指教。8Xm办公区 - 实用经验教程分享!

工具/原料

  • iepngfix
  • 透明图片

方法/步骤

  • 1

    按理说一张透明的png图片,在IE8 以及其他浏览器实现透明是很简单的,但是在IE6这种虐死程序员的浏览器上面,也尝试了很多种方式,包括js法,滤镜css法等等总感觉不完美,于是,就有了后来..8Xm办公区 - 实用经验教程分享!

  • 2

    最终发现了使用htc方法嵌到css文件中基本可以一次性解决大部分的透明问题。这个方法很多人已经介绍过,只是官方是英文,很少有翻译,所以很少人使用。首先下载iepngfix,这个百度里面随便搜索一个就可以8Xm办公区 - 实用经验教程分享!

    IE6浏览器下图片及背景图片透明的终极解决办法8Xm办公区 - 实用经验教程分享!

    IE6浏览器下图片及背景图片透明的终极解决办法8Xm办公区 - 实用经验教程分享!

  • 3

    下载之后里面有Demo,打开即可看到调用方式。8Xm办公区 - 实用经验教程分享!

    基本可解决:8Xm办公区 - 实用经验教程分享!

    8Xm办公区 - 实用经验教程分享!

    1、在页面使用【img】标签使用的png透明图像8Xm办公区 - 实用经验教程分享!

    2、在css中用background加入的png透明背景图片(支持多种版本)8Xm办公区 - 实用经验教程分享!

    3、某些情况下background-image的png透明,需要在当前页添加一个js来解决8Xm办公区 - 实用经验教程分享!

  • 3此文章未经授权抓取自百度经验
  • 4

    1、下载之后解压出来会有很多的文件,我们需要用的有其中3个文件:8Xm办公区 - 实用经验教程分享!

    blank.gif,iepngfix.htc 以及iepngfix_tilebg.js8Xm办公区 - 实用经验教程分享!

    2、可以自己把他们分别放到相对应的css、js和images目录8Xm办公区 - 实用经验教程分享!

    3、添加以下代码:在html中添加样式,注意htc文件的路径,最好使用相对路径,这样一般就不会出错,你也可以把behavior:url(iepngfix.htc)添加到自己的css中8Xm办公区 - 实用经验教程分享!

    style type="text/css">img, div { behavior: url(iepngfix.htc); }/style>8Xm办公区 - 实用经验教程分享!

    4、使用文本编辑器打开iepngfix.htc,把里面的blankImg路径替换成自己的图片路径,如images/blank.gif,视自己的情况而定8Xm办公区 - 实用经验教程分享!

    IEPNGFix.blankImg = 'images/blank.gif';8Xm办公区 - 实用经验教程分享!

    5、把以下这句js调用的代码加入到需要用到透明效果的页面head中去8Xm办公区 - 实用经验教程分享!

    script type="text/javascript" src="iepngfix_tilebg.js">/script>8Xm办公区 - 实用经验教程分享!

    IE6浏览器下图片及背景图片透明的终极解决办法8Xm办公区 - 实用经验教程分享!

    IE6浏览器下图片及背景图片透明的终极解决办法8Xm办公区 - 实用经验教程分享!

  • 5

    通过以上的步骤,你基本可以实现IE低版本浏览器的png透明效果了,有出现问题,欢迎一起讨论,谢谢啦!8Xm办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!8Xm办公区 - 实用经验教程分享!


    标签: 浏览器图片浏览背景透明

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码