`
xiaomiya
  • 浏览: 126807 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

解决IE6图片半透明效果

阅读更多

这个话题已经被讨论的不想在讨论的问题,,今天我们做个小小的回顾和总结,做项目中,遇到这样的问题,我们也不要去纠结,如果图片用gif也不影响美观的话就用gif。。如果要求更高的像素那就png8或者24.

项目中可能只有个别一个or几个地方要用到半透明效果。

那么我们可以用比较简单的hack来处理下就OK

1,

<div class="img4"></div>

 

.img4{ width: 53px; height: 49px; background: url(i1.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="i1.png");}

 

如果项目中有很多地方要进行处理的话,那么我们就有必要引入一个js问题。

为了性能考虑我们就用注释来处理引入文件

<!--[if IE 6]>
<script src="http://s.thsi.cn/sns/js/ie/opacity.ie6.js" ></script>
<script>
    DD_belatedPNG.fix('.img1,.img3');
</script>
<![endif]-->

 

<div class="img1"></div>
<div class="img2"><img class="img3" src="i1.png" /></div>

 

.img1{ width: 53px; height: 49px; background: url(i1.png) no-repeat; margin-bottom:20px;}
	
	.img2{ width: 53px; height: 49px; margin-bottom: 20px;}
	.img3{width: 53px; height: 49px;}

 这样处理背景图片,和img标签图片都可以。

opacity.ie6.js

/@charset "utf-8";
/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/
var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L+n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();

 

ok

 

 

 


1
0
分享到:
评论
2 楼 xiaomiya 2014-03-25  
个别情况下,我们还要考虑下ie6的。。不过现在有pie css3 可以让ie6到ie8支持css3属性。
1 楼 vicle 2014-03-24  
现在已经彻底对IE6死心了,就让那些用IE6的客户们继续用吧,我会用我的成果去让他们知道他们不肯放弃IE6的遗憾。

相关推荐

    js实习在IE6下png透明效果

    网页设计在制作网站时时常会遇见IE6的PNG图片透明兼容问题,网上也有很多介绍关于IE6浏览器不显示PNG透明图片的解决方案,但多数是有问题的。...在此,提供一个JS解决IE6的PNG图片透明问题100%有效。

    DD_belatedPNG.js下载,解决IE6下的PNG的透明问题

    摘要:脚本资源,Ajax/JavaScript,DD_belatedPNG.js DD_belatedPNG.js是为了解决IE6下透明png图片缩小时不能完全显示问题的JS插件,完美解决IE6下的PNG透明问题。DD_belatedPNG基于微软VML语言编写,对PNG图片进行...

    解决IE6的PNG透明JS插件使用介绍

    DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性,支持伪类。是一款不错的值得推荐的插件,用法也比较简单。 使用方法: 代码...

    JavaScript 图片切割效果

    底图层:在容器最底部,作用是显示非选择区域的图片,透明效果就是在这层设置; 切割层:最关键的一个层,在底图层和控制层之间,在这个层通过clip设置其可视区域来实现切割图片的效果; 控制层:位于顶部,拖放(_...

    CSS解决方案:IE6中遇到png兼容性

    为满足用户的视觉追求及产品的背景图片的换肤功能,设计师难免在设计上会用到半透明的效果。因此页面重构师基于视觉及产品的需要,采用了PNG32的半透明图片还原设计稿。 但在IE6中遇到png兼容性,及其延伸的种种问题...

    IE8下jQuery改变png图片透明度时出现的黑边

    png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1、把图片保存成PNG-8格式。 2、把背景色一起切入并保存为JPG格式。 以上两种方法我试了试,好像...

    梦想论坛 FOR DVBBS7.2 完全插件美化版

    …… 添加GOOLE和SOGUA搜索 添加后台会员性别修改功能 下拉菜单半透明效果技 精华的显示 动网7.0实用修改 改论坛顶部公告颜色 在首页上显示“建站天数”“帅哥”“靓妹”修改...

    delphi 开发经验技巧宝典源码

    0286 如何实现窗体半透明 185 0287 制作立体窗口阴影效果 186 8.6 工具栏、状态栏及下拉列表 187 0288 制作带历史信息的菜单 187 0289 制作可以拉伸的菜单界面 188 0290 制作类似于XP颜色的下拉页 188 ...

    delphi 开发经验技巧宝典源码06

    0286 如何实现窗体半透明 185 0287 制作立体窗口阴影效果 186 8.6 工具栏、状态栏及下拉列表 187 0288 制作带历史信息的菜单 187 0289 制作可以拉伸的菜单界面 188 0290 制作类似于XP颜色的下拉页 188 ...

    明日科技C#开发入门及项目实战

    实例078 尝试制作一个半透明渐显窗体 实例079 使窗体标题栏文字右对齐 实例080 窗口间移动按钮 实例081 窗体中滚动的字幕 实例082 使用任意组件拖动窗体 实例083 窗体换肤程序 第9章 windows应用程序常用控件 实例...

    C#程序开发范例宝典(第2版).part13

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part02

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part08

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

    C#程序开发范例宝典(第2版).part12

    实例029 半透明渐显窗体 29 实例030 窗口颜色的渐变 30 1.9 窗体动画 31 实例031 窗体中的滚动字幕 31 实例032 动画显示窗体 32 实例033 制作闪烁的窗体 33 实例034 实现任务栏通知窗口 34 实例035 动画形式...

Global site tag (gtag.js) - Google Analytics