一次性解决PNG透明度在IE6下显示问题的脚本

2024-03-15 13:48

本文主要是介绍一次性解决PNG透明度在IE6下显示问题的脚本,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

png格式因为其优秀的压缩算法和对透明度的完美支持,成为web中最流行的图片格式之一。
IE6下png的图片不显示透明效果。其他浏览器都挺好的。
为了解决IE6下png图片的般透明效果,的方案是:
一次性解决PNG透明度在IE6下显示问题的脚本
function correctPNG(){for(var i=0; i<document.images.length; i++){var img = document.images[i]var imgName = img.src.toUpperCase()if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id) ? "id='" + img.id + "' " : ""var imgClass = (img.className) ? "class='" + img.className + "' " : ""var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "var imgStyle = "display:inline-block;" + img.style.cssTextif (img.align == "left") imgStyle = "float:left;" + imgStyleif (img.align == "right") imgStyle = "float:right;" + imgStyleif (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle     var strNewHTML = "<span " + imgID + imgClass + imgTitle+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"img.outerHTML = strNewHTMLi = i-1}}}
function alphaBackgrounds(){var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);for (i=0; i<document.all.length; i++){var bg = document.all[i].currentStyle.backgroundImage;if (bg){if (bg.match(/.png/i) != null){var mypng = bg.substring(5,bg.length-2);//alert(mypng);document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://xiaomiya2008.blog.163.com/blog/"+mypng+"', sizingMethod='crop')";document.all[i].style.backgroundImage = "url('')";//alert(document.all[i].style.filter);}                                               }}
}
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}


它的实现原理是当页面加载完成后,先遍历页面内所有的图片元素,找到后缀为.png的图片,将他们改成span标签,设置为display:inline-block的类型,长宽和原png图片一样,然后配上progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png 图片路径’,sizingMethod=‘crop’)的滤镜,实现png的透明效果,再遍历页面内所有元素,检查他们是否有png的背景图,如果有,则将背景图去掉,改用滤镜。这种方式调用非常方便,只要将这段代码放入网页中任意地方,当页面加载完成后,png图片都可以实现透明。但他也存在一定问题。
1)当页面全部加载完成前,png图片的透明部分仍然会显示为浅蓝;
2)遍历所有元素,执行效率不高;
3)当png是以背景形式插入网页的,它可能有background-position和background-repeat属性,而滤镜是不支持者两个属性的,如果设置了这两个属性,这两个属性的效果会丢失。

这篇关于一次性解决PNG透明度在IE6下显示问题的脚本的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/812180

相关文章

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结:因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理,但拉取后,上l

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法:因系统盘空间不足,需将Docker数据迁移到更大磁盘(如/home/docker),通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源(如淘宝)、清理缓存及切换工具解决,建议设置全局镜像(npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法:删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错,是

在Ubuntu上打不开GitHub的完整解决方法

《在Ubuntu上打不开GitHub的完整解决方法》当你满心欢喜打开Ubuntu准备推送代码时,突然发现终端里的gitpush卡成狗,浏览器里的GitHub页面直接变成Whoathere!警告页面... 目录一、那些年我们遇到的"红色惊叹号"二、三大症状快速诊断症状1:浏览器直接无法访问症状2:终端操作异常

mybatis直接执行完整sql及踩坑解决

《mybatis直接执行完整sql及踩坑解决》MyBatis可通过select标签执行动态SQL,DQL用ListLinkedHashMap接收结果,DML用int处理,注意防御SQL注入,优先使用#... 目录myBATiFBNZQs直接执行完整sql及踩坑select语句采用count、insert、u

Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题

《Python爬虫HTTPS使用requests,httpx,aiohttp实战中的证书异步等问题》在爬虫工程里,“HTTPS”是绕不开的话题,HTTPS为传输加密提供保护,同时也给爬虫带来证书校验、... 目录一、核心问题与优先级检查(先问三件事)二、基础示例:requests 与证书处理三、高并发选型:

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

MyBatis Plus大数据量查询慢原因分析及解决

《MyBatisPlus大数据量查询慢原因分析及解决》大数据量查询慢常因全表扫描、分页不当、索引缺失、内存占用高及ORM开销,优化措施包括分页查询、流式读取、SQL优化、批处理、多数据源、结果集二次... 目录大数据量查询慢的常见原因优化方案高级方案配置调优监控与诊断总结大数据量查询慢的常见原因MyBAT