IE6下实现PNG背景透明的方法小结
PNG图像格式介绍:
PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。
IE6下PNG背景透明的显示问题
PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示出灰色的背景
IE6中PNG背景透明图片显示如图:
正常显示如图:
IE6下PNG背景透明的解决办法
1、用hack方法使用GIF格式替代PNG(视觉要求允许的情况)
.pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号,目前IE7,8以及Firefox浏览器等都不支持此CSS语法,只有IE6识别。因此,其他浏览器会调用PNG,而IE6刚调用GIF。
2、滤镜filter解决IE6下背景灰
background:url(a.png) repeat-x 0 ===0;
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");
上面的原理是其他调用PNG,IE6,则先设背景没有,然后调用滤镜使之显示PNG图片。
缺陷:IE6下背景无法平铺,这个问题很严重。同时在性能上也有小问题,页面中次数不是很多的时候该办法还是可行的。
3、使用DD_belatedPNG让IE6支持PNG透明图片
整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.
使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题,并且支持backgrond-position与background-repeat.这是其他方法所不具备的,同时DD_belatedPNG还支持a:hover属性,以及。
使用方法:
在页面中外部引用JS文件。
引用函数是DD_belatedPNG.fix() ,括号里分别填写应用PNG的CSS选择器(可使用ID选择器和类选择器)和应用类型(分为img和background两种)。
如:
DD_belatedPNG.fix(‘#box-one, img’)
DD_belatedPNG.fix(‘.header, background’)
这些可以简写成:
DD_belatedPNG.fix(‘#box-one, .header, img,background’);
更多选择器的如:
DD_belatedPNG.fix(‘#box-one, .header,#footer,.box-two a:hover, img,background’)
JS文件见附件:/Uploads/file/20170503/20170503133515_30129.rar
在这里可以直接下载DD_belatedPNG.js文件:
http://dillerdesign.com/experiment/DD_belatedPNG/#download
优点:
1、CSS代码无需任何修改,按照平时的思路来写即可;
2、无需配置;
3、没有多余的gif图片;
4、支持img标签;
5、支持平铺;
6、支持CSS Sprite;
7、支持Hover等伪类;
缺点:
1、额外加入了js文件(6.39k)和http请求,可以忽略不计;
2、当文件载入之前,会先暂时呈现灰底;
3、js文件过多的时候,可能会报错,导致js无法正常运行(这种情况极少出现,可以忽略不计);
以上就是本文讲述IE6兼容透明背景图片及解决方案的全部内容,希望对大家有所帮助。
本篇文章版权由苏州空谷网络科技有限公司所有,如需转载,请注明出处!
- 热门资讯
-
- 1空谷科技 | 启航新征程,赋能再出发!
- 2苏州高新区人民医院&空谷科技 | 推进平台数字化转型,定制互联网+解决方案
- 3中国国际纳米技术产业博览会&空谷科技 | “山容海‘纳’、无‘微’不至”,第十二届纳博会圆满收官!
- 4固德威&空谷科技 | 用思想的力量带领行业向前奔跑,固德威太阳能学院平台正式上线
- 5苏州混凝土水泥制品研究院&空谷科技 | 助推系统安全体系建设,塑造责任央企品牌形象
- 6【上线】 新冠肺炎疫情下的大学在线教育--实践合作H5设计项目成功上线
- 7【签约】空谷科技成功签约中国教育部H5设计项目!
- 8【上线】第二届联合国机构宣讲活动H5设计项目成功上线
- 9【签约】再次合作!城投资本公司再次携手空谷科技
- 10【上线】苏大本科招生网高端网站建设项目成功上线
- 11空谷科技携手华为云助力互联网营销升级&企业数字化转型专场活动成功举办
- 12温暖相伴,空谷科技第三季度生日会&阅读分享会来啦!
- 131024程序员节 | 程序改变世界,世界以你为荣
- 14员工关怀 | 暖心下午茶,为奋斗续航
- 15@所有人,节日快乐!
- 16亚马逊云科技+空谷科技 | 创新携手,持续深耕,赋能传统企业数字化转型
- 17苏州工业园区科创企业联合会莅临空谷科技进行调研和指导工作
- 18空谷科技 | 回顾过去,展望未来
- 19苏州奥体中心&空谷科技 | 推动高效线上管理营销,数字化培训系统上线!
- 20伏图拉&空谷科技 | 多维度彰显品牌调性,构建企业文化展示窗口