一次性解决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

相关文章

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

C++右移运算符的一个小坑及解决

《C++右移运算符的一个小坑及解决》文章指出右移运算符处理负数时左侧补1导致死循环,与除法行为不同,强调需注意补码机制以正确统计二进制1的个数... 目录我遇到了这么一个www.chinasem.cn函数由此可以看到也很好理解总结我遇到了这么一个函数template<typename T>unsigned

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4

Linux下MySQL数据库定时备份脚本与Crontab配置教学

《Linux下MySQL数据库定时备份脚本与Crontab配置教学》在生产环境中,数据库是核心资产之一,定期备份数据库可以有效防止意外数据丢失,本文将分享一份MySQL定时备份脚本,并讲解如何通过cr... 目录备份脚本详解脚本功能说明授权与可执行权限使用 Crontab 定时执行编辑 Crontab添加定

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

504 Gateway Timeout网关超时的根源及完美解决方法

《504GatewayTimeout网关超时的根源及完美解决方法》在日常开发和运维过程中,504GatewayTimeout错误是常见的网络问题之一,尤其是在使用反向代理(如Nginx)或... 目录引言为什么会出现 504 错误?1. 探索 504 Gateway Timeout 错误的根源 1.1 后端

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

深度剖析SpringBoot日志性能提升的原因与解决

《深度剖析SpringBoot日志性能提升的原因与解决》日志记录本该是辅助工具,却为何成了性能瓶颈,SpringBoot如何用代码彻底破解日志导致的高延迟问题,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言第一章:日志性能陷阱的底层原理1.1 日志级别的“双刃剑”效应1.2 同步日志的“吞吐量杀手”

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据