JQuery解决IE6不支持透明png图片、png背景

1,解决直接以 img 标签显示的png图片
 

 代码如下 复制代码
$(document.body).fixpng({scope:’img’});

可将body内的所有png图片显示为透明效果.

2,解决以 透明png为背景 图片的情况

 代码如下 复制代码

$(‘div’).fixpng();

可将所有 div 标签 背景图为png的变为透明

演示

 代码如下 复制代码

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
  $(document).pngFix();
});
</script>

把下面代码保存成jquery.pngFix.js文件,然后导入调用

 代码如下 复制代码

(function($){var jspath=$('script').last().attr('src');var basepath='';if(jspath.indexOf('/')!=-1){basepath+=jspath.substr(0,jspath.lastIndexOf('/')+1);}$.fn.fixpng=function(options){function _fix_img_png(el,emptyGIF){var images=$('img[src*="png"]',el||document),png;images.each(function(){png=this.src;width=this.width;height=this.height;this.src=emptyGIF;this.width=width;this.height=height;this.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+png+"',sizingMethod='scale')";});}function _fix_bg_png(el){var bg=$(el).css('background-image');if(/url(['"]?(.+.png)['"]?)/.test(bg)){var src=RegExp.$1;$(el).css('background-image','none');$(el).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"',sizingMethod='scale')");}}if($.browser.msie&&$.browser.version<7){return this.each(function(){var opts={scope:'',emptyGif:basepath+'blank.gif'};$.extend(opts,options);switch(opts.scope){case'img':_fix_img_png(this,opts.emptyGif);break;case'all':_fix_img_png(this,opts.emptyGif);_fix_bg_png(this);break;default:_fix_bg_png(this);break;}});}}})(jQuery);

时间: 2024-09-20 10:40:21

JQuery解决IE6不支持透明png图片、png背景的相关文章

jquery解决ie6中图片过大导致错位解决方法

jquery解决ie6中图片过大导致错位解决方法 在产品展示页面中用jqurey控制下: /*这个标签调用产品图片*/ <asp教程:image runat="server" id="productbigimg" /> 首先引入jquery <script src="/utility/js/jquery.js" type="text/网页特效"></script> <script ty

JS解决ie6下png透明方法

  解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK. <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css"> .a{background: #FFFF99 ; backgroun

利用JS解决ie6不支持max-width,max-height问题

 本篇文章主要介绍了利用JS解决ie6不支持max-width,max-height问题的方法.需要的朋友可以过来参考下,希望对大家有所帮助 今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如   代码如下:   if($.browser.msie && $.browser.version == 6.0)   {     var maxWidth = parseInt($('.view

利用JS解决ie6不支持max-width,max-height问题的方法_javascript技巧

今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 复制代码 代码如下:   if($.browser.msie && $.browser.version == 6.0)  {    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));    $('.viewBigPic img').each(function(

JS解决ie6下png透明的方法实例

解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK.   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css">  .a{background: #FFFF99

JS解决ie6下png透明的方法实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

网页设计小技巧:解决IE6不支持hover

文章简介:网页设计小技巧:解决IE6不支持hover.  IE6以及更低版本的浏览器对":hover"的支持不理想,对于类似的"p:hover"."img:hover"."#header:hover"...,今天给大家介绍一种新的方法,可以完美解决IE6不支持hover的情况,用法很简单,将下载后的"csshover.htc"文件,定义在body样式内 body { behavior:url("c

CSS实例教程:完美解决IE6不支持hover的方法

文章简介:完美解决IE6不支持hover的方法. <style type="text/css">         p:hover,p.hover { background:#eee; }   /* 就是要多写一个.hover而已 */ </style> 下面这段代码要放到页面的底部在</body> 前: <script type="text/javascript">    //<!–  让所有标记支持hover 

用jQuery解决IE不支持的option disable属性_jquery

使用jQuery解决IE不支持的option disable属性 普通: 第1项第2项第3项第4项第5项第6项 对比1: 第1项第2项第3项第4项第5项第6项 对比2: 第1项第2项第3项第4项第5项第6项Dev By CssRain,当然你有兴趣,也可以封装成插件.记得发我一份哦.