处理IE6下PNG图片透明背景问题
由于历史原因,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图片透明背景问题相关推荐
- IE6下PNG图片透明效果(PNG图片做背景也可以)
懒人萱在这里保证发的文章都是高质量的经过测试的JS代码,而且IE6.IE7和火狐都兼容的,希望大家多多关注我的帖子,我会把我的经验都共享出来哦! 懒人萱在寻找PNG图片透明效果的JS特效代码的时候,发 ...
- IE6下png图片透明代码
png图片有很好的品质,阴影效果也不会有杂边,很流畅.如果插入网页的话可以给网站增色不少.更重要的是,在不增加图片容量大小的情况下,提高了页面图片的质量.对于有复杂背景,如在有颜色过度背景上插入不规则 ...
- 新分享一种解决ie6下PNG图片透明的方法
IE6中的图片不透明问题一直困扰着广大设计从业者们,前段时间已经分享了一种使用HTC文件解决的方法和使用滤镜使png背景图片透明的方法,今天再分享一种使用脚本代码使PNG图片在IE6中透明的办法. 脚 ...
- 解决IE6中 PNG图片透明的终极方案-八种方案!
"珍惜生命,远离IE6",IE6中的bug令很多Web前端开发人员实为头疼,因此不知道烧了多少脑细胞,在众多的Bug中最令人抓狂的就是IE对png图片的不支持,导致设计师和重构师放 ...
- ie6 下最佳 PNG透明方案【转】
"咳! 哎!-.. " 你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是无奈呀-.. 不过现在幸运的是,我们能够让这一切的抱怨都停止. 网络上解 ...
- wps怎么图片透明_Tips:设置图片透明背景
点击"一只七秒记忆的鱼"关注我 TIPS: 平时在做PPT.H5.长图等等 都会用到"插入图片"功能 一般找到的图片都不是透明背景 那么会产生以下效果,非常影响 ...
- python转换图片透明背景为白色
两种方法,思路一致: 方法一: import cv2# 修改透明背景为白色 def transparence2white(img):sp=img.shape # 获取图片维度width=sp[0] # ...
- python(opencv2、PIL)将图片透明背景转换成白色背景的两种方法
对于急需要用的朋友可以直接用下面的代码 opencv2实现 import cv2def alpha2white_opencv2(img):sp=img.shapewidth=sp[0]height=s ...
- JAVA下GUI设置透明背景图片窗口(不覆盖文本内容)
之前学过Java的GUI,写过简单的例子.昨天朋友问怎么能为窗口设置背景图片,且让文字在背景上边显示,挺简单的要求折腾了好一会儿才实现-mark一下. 一.最终效果图: 二.源码 public cla ...
最新文章
- Exchange Server 2007 移动邮件
- 2、HTML <img>标签(插入图片)
- AAAI21最佳论文Runners Up!Transformer的归因探索!
- kibana操作elasticsearch:创建映射字段
- 查找当前地形位置上的贴图信息
- 奉献一个窗口置顶的小工具
- 9203 0427 随堂小结
- 滴滴回应高额抽成:确实存在;抖音火山版被判赔腾讯 800 万元;华为鸿蒙系统有望下月规模化推送|极客头条...
- input reset 重置时间
- Cygwin ssh
- Mac m1 Kettle安装
- 高通平台fastboot下载
- xdb 服务_oracle禁用XDB服务
- Delphi XE10.4字体字号对应的Font Size的点或像素换算
- 【无限互联】SDWebImage图片缓存流程分析
- 经典网页设计:25个精美的全屏背景网站设计作品
- solidworks动画制作教程——装配体爆炸动画
- uniapp吸顶功能实现
- bp是什么意思贷款利率,bp在利率是什么意思
- “平衡小车之家”家的STM32F103最小系统源代码分享
热门文章
- ucosii 如何确定定时器的时间_全国中小学寒假时间确定,家长如何安排孩子们假期更合理?...
- 杨云 中科院计算机所,专家人才库数据----中国科学院计算技术研究所
- java 场景处理,最适合使用RxJava处理的四种场景
- mysql 表2符合表1,MySQL:表tbl_2_1_15已满
- centos 安装maven_安装及使用Jenkins
- 巧用Notepad++代码粘贴功能
- LeetCode2. 两数相加
- python处理数据集并制作词云图
- 解决pycharm中新建的工程因为运行图标等均为灰色而无法运行的问题
- 云计算学习教程,Python自动化运维开发实战