`
xiaomiya
  • 浏览: 131292 次
  • 性别: 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的遗憾。

相关推荐

    ie6透明图片js

    在IE6这个古老的浏览器上,由于其内核的限制,PNG24格式的图片无法实现半透明效果,这给网页设计带来了很大的困扰。为了解决这个问题,开发者们使用JavaScript来模拟透明效果,其中一种常见的解决方案就是"ie6透明...

    IE6下完美解决png图片半透明问题

    由于其对现代Web标准的支持不足,特别是在处理PNG图像时,IE6经常会出现一些棘手的问题,尤其是对于PNG-24格式的图像,它支持的半透明效果(Alpha通道)无法正常显示,导致图像边缘出现不透明的黑色或白色边框,这...

    解决IE6 PNG图片透明问题

    4. 图片背景替换:如果条件允许,可以考虑使用其他设计元素替代PNG图片,比如SVG图形(如果浏览器支持)或者使用CSS3的`background-color: rgba()`属性创建半透明效果。 5. 鼓励升级浏览器:虽然这是一个理想化的...

    处理ie6下png格式透明效果

    PNG格式允许24位色彩的同时还提供了 Alpha 通道,可以实现半透明效果,但在IE6中,这种透明特性却无法正常显示,导致图片背景呈现出不透明的黑色或白色。以下是对这个问题的详细分析和解决方案: 首先,我们需要...

    IE6图片背景透明

    解决IE6图片背景透明的方法主要有以下几种: 1. **CSS滤镜(Filter)**:IE6特有的CSS滤镜属性可以实现透明效果。对于PNG图片,可以使用`alpha(opacity=xx)`,其中`xx`是0到100之间的数字,表示透明度,100为完全...

    js_IE6支持png透明解决png_ie6下不透明背景图片

    PNG-24格式允许半透明和全透明效果,但IE6只支持8位的PNG-8,而这种格式最多只能有256种颜色,无法实现半透明。因此,当你在IE6中使用PNG-24格式的图片时,透明部分会显示为完全不透明,即背景色或默认颜色。 为了...

    完美解决IE6下png透明

    在早期的网页设计中,IE6(Internet Explorer 6)作为主流浏览器,其对PNG(Portable Network Graphics)图像格式的支持存在显著的问题,尤其是对于PNG-24格式的图像,它无法正确显示背景透明或者半透明效果。...

    IE6 图片背景透明

    这段CSS代码会使得具有`ie6-transparent`类的图片变得半透明。但请注意,这仅对图片本身生效,并不会让图片的背景变透明。因此,我们需要一种方法使图片背景透明。 一种常见的解决办法是使用PNG-24格式的图片,这种...

    IE6透明解决方案,背景图片透明

    由于IE6不支持CSS3中的`opacity`属性,因此在实现背景图片透明或者图片透明效果时,开发者需要采用特殊的技术来解决这一问题。以下是对“IE6透明解决方案,背景图片透明”这个主题的详细解释: 1. **PNG-24格式的...

    IE6_PNG透明终极解决办法

    PNG格式的图片支持Alpha透明通道,允许半透明效果,但在IE6这个古老的浏览器中,对PNG8和PNG24格式的透明处理并不完善,导致透明效果显示异常。这篇博客可能提供了针对这一问题的解决方案。 在IE6中,PNG透明问题...

    png在ie6下半透明js修正

    PNG格式的图片在现代浏览器中广泛支持,但老版本的Internet Explorer,特别是IE6,却对PNG的半透明效果处理不理想。这个问题源于IE6不支持PNG24位的Alpha通道,导致PNG图像的透明部分在IE6下显示为黑色或完全不透明...

    IE6png图片透明

    在早期的网页设计中,IE6(Internet Explorer 6)浏览器对PNG图片格式的支持存在一些问题,特别是对于PNG-24格式的图片,它无法正确处理半透明效果,导致设计师和开发者面临诸多挑战。"IE6_PNG_position(定位)&...

    js实习在IE6下png透明效果

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

    IE6 png背景图片透明

    这导致了开发者在设计网页时遇到困扰,特别是在需要透明背景或半透明效果时。 要解决IE6中的PNG透明问题,有几种常见的方法: 1. **CSS滤镜(Filter)**:IE6提供了一个名为`AlphaImageLoader`的滤镜,可以用来...

    ie6中png透明解决方案 js

    PNG是一种无损压缩的图像格式,支持24位色彩和8位灰度色彩,同时提供了Alpha通道,实现了半透明效果。在现代浏览器中,PNG-24格式的图片可以完美展示透明效果,但在IE6中却出现了问题。 解决方案的核心在于使用...

    ie6下png图片透明解决方案

    PNG-24格式的图片支持阿尔法通道透明,但IE6并不完全兼容,导致图片背景显示为黑色或者出现半透明效果,而不是预期的完全透明。这在设计网页时会带来困扰,尤其是在需要透明背景或者半透明效果时。以下是一些解决IE6...

    IE6下图片透明

    总的来说,解决IE6下的图片透明问题需要对CSS滤镜有深入理解,以及利用像`iepngfix.htc`这样的行为文件。虽然现代浏览器已经不再需要这些技巧,但对于维护旧项目或照顾仍使用IE6的用户来说,这些知识仍然是有价值的...

    IE6png透明JS

    2. **DD_belatedPNG**:这是一个非常著名的JavaScript库,由Dean Edwards开发,专门用于解决IE6下的PNG透明问题。通过添加额外的JavaScript代码,该库可以动态地修改DOM元素,使得PNG-24图像在IE6下表现得像在现代...

    ie6浏览器下图片透明

    总的来说,解决IE6下的图片透明问题需要一些额外的工作,包括使用特定的行为文件和CSS滤镜。提供的文件清单显示了一个完整的解决方案,包括测试页面、修复文件以及示例图片。通过正确引用和配置这些资源,开发者可以...

    IE6中png透明效果显示

    PNG是一种高质量的位图格式,支持Alpha透明度,使得图像可以实现半透明效果。然而,在IE6中,PNG的透明特性并未得到很好的支持,导致许多设计师和开发者面临挑战。 首先,我们需要了解PNG图像的透明机制。PNG-8仅...

Global site tag (gtag.js) - Google Analytics