由于历史原因,IE较早的版本不支持PNG透明

可以支持GIF等的透明

由于png图片相对较小,所以很多网站还是青睐于PNG图片

最近就遇到这种情况,使用js和css滤镜来实现的与大家分享一下下:

首先,判断浏览器和版本,如果是IE7一下版本,进行处理

再者,遍历所有<img>控件,如果为png格式的处理;

最后,img的onload加载图片,并用css滤镜处理图片

//ie6 编码图片
function ES_PNG(obj,rootPath){
 if( !( $.browser.msie && parseFloat( $.browser.version ) < 7 )){
  return ;
 }
 obj.each(function(){
  var imgSrc = $.trim( $(this).attr("src") );
  var suf = "";
  //取图片的后缀
  if( imgSrc.length > 0 &&  imgSrc.indexOf("?") == -1){
   suf = imgSrc.substring( imgSrc.lastIndexOf(".")+1 ).toUpperCase();
  }else if( imgSrc.length > 0 &&  imgSrc.indexOf("?") != -1){
   imgSrc = imgSrc.substring( 0 , imgSrc.indexOf("?") );
   suf = imgSrc.substring( imgSrc.lastIndexOf(".")+1 ).toUpperCase();
  }
  if( suf == "PNG"){
   var which = $(this).get(0);
     var src = which.src;
      // 添加随机数防止图片缓存
     var random = new Date().getTime()  ;
     if(src.indexOf("?") == -1){
    src +="?random="+random ;
   }else{
    src +="&random="+random ;
   }
     var img = new Image();
      img.onload = function(){
       var width = parseInt( which.style.width );
       var height = parseInt( which.style.height );
       if( isNaN(width) || isNaN( height)){
        which.style.width  = ( parseInt(this.width) )+"px";
        which.style.height  = ( parseInt(this.height) )+"px";
          }else{
           which.style.width  =   parseInt( width)  +"px";
        which.style.height  =  parseInt( height) +"px" ;
       };
       which.src =  rootPath+"ieseal.gif"  ;//--1个像素的透明gif
       //设置css滤镜
    which.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='scale')";
   };
      img.src = which.src;
  };
 });
}

在web中调用该方法:

//if6去掉png背景
 ES_PNG($("img"),"${basePath}/images/public/");

其中ES_PNG()的两个参数:$("img")是所有的图片,${basePath}/images/是1像素透明gif图的位置

转载于:https://www.cnblogs.com/qixing/p/IE6_PNG.html

处理IE6下PNG图片透明背景问题相关推荐

  1. IE6下PNG图片透明效果(PNG图片做背景也可以)

    懒人萱在这里保证发的文章都是高质量的经过测试的JS代码,而且IE6.IE7和火狐都兼容的,希望大家多多关注我的帖子,我会把我的经验都共享出来哦! 懒人萱在寻找PNG图片透明效果的JS特效代码的时候,发 ...

  2. IE6下png图片透明代码

    png图片有很好的品质,阴影效果也不会有杂边,很流畅.如果插入网页的话可以给网站增色不少.更重要的是,在不增加图片容量大小的情况下,提高了页面图片的质量.对于有复杂背景,如在有颜色过度背景上插入不规则 ...

  3. 新分享一种解决ie6下PNG图片透明的方法

    IE6中的图片不透明问题一直困扰着广大设计从业者们,前段时间已经分享了一种使用HTC文件解决的方法和使用滤镜使png背景图片透明的方法,今天再分享一种使用脚本代码使PNG图片在IE6中透明的办法. 脚 ...

  4. 解决IE6中 PNG图片透明的终极方案-八种方案!

    "珍惜生命,远离IE6",IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放 ...

  5. ie6 下最佳 PNG透明方案【转】

    "咳! 哎!-.. " 你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀-.. 不过现在幸运的是,我们能够让这一切的抱怨都停止. 网络上解 ...

  6. wps怎么图片透明_Tips:设置图片透明背景

    点击"一只七秒记忆的鱼"关注我 TIPS: 平时在做PPT.H5.长图等等 都会用到"插入图片"功能 一般找到的图片都不是透明背景 那么会产生以下效果,非常影响 ...

  7. python转换图片透明背景为白色

    两种方法,思路一致: 方法一: import cv2# 修改透明背景为白色 def transparence2white(img):sp=img.shape # 获取图片维度width=sp[0] # ...

  8. python(opencv2、PIL)将图片透明背景转换成白色背景的两种方法

    对于急需要用的朋友可以直接用下面的代码 opencv2实现 import cv2def alpha2white_opencv2(img):sp=img.shapewidth=sp[0]height=s ...

  9. JAVA下GUI设置透明背景图片窗口(不覆盖文本内容)

    之前学过Java的GUI,写过简单的例子.昨天朋友问怎么能为窗口设置背景图片,且让文字在背景上边显示,挺简单的要求折腾了好一会儿才实现-mark一下. 一.最终效果图: 二.源码 public cla ...

最新文章

  1. Exchange Server 2007 移动邮件
  2. 2、HTML <img>标签(插入图片)
  3. AAAI21最佳论文Runners Up!Transformer的归因探索!
  4. kibana操作elasticsearch:创建映射字段
  5. 查找当前地形位置上的贴图信息
  6. 奉献一个窗口置顶的小工具
  7. 9203 0427 随堂小结
  8. 滴滴回应高额抽成:确实存在;抖音火山版被判赔腾讯 800 万元;华为鸿蒙系统有望下月规模化推送|极客头条...
  9. input reset 重置时间
  10. Cygwin ssh
  11. Mac m1 Kettle安装
  12. 高通平台fastboot下载
  13. xdb 服务_oracle禁用XDB服务
  14. Delphi XE10.4字体字号对应的Font Size的点或像素换算
  15. 【无限互联】SDWebImage图片缓存流程分析
  16. 经典网页设计:25个精美的全屏背景网站设计作品
  17. solidworks动画制作教程——装配体爆炸动画
  18. uniapp吸顶功能实现
  19. bp是什么意思贷款利率,bp在利率是什么意思
  20. “平衡小车之家”家的STM32F103最小系统源代码分享

热门文章

  1. ucosii 如何确定定时器的时间_全国中小学寒假时间确定,家长如何安排孩子们假期更合理?...
  2. 杨云 中科院计算机所,专家人才库数据----中国科学院计算技术研究所
  3. java 场景处理,最适合使用RxJava处理的四种场景
  4. mysql 表2符合表1,MySQL:表tbl_2_1_15已满
  5. centos 安装maven_安装及使用Jenkins
  6. 巧用Notepad++代码粘贴功能
  7. LeetCode2. 两数相加
  8. python处理数据集并制作词云图
  9. 解决pycharm中新建的工程因为运行图标等均为灰色而无法运行的问题
  10. 云计算学习教程,Python自动化运维开发实战