实现png图片和png背景透明(支持多浏览器)的方法


Posted in Javascript onSeptember 08, 2009

虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:IE5.5+的AlphaImageLoader滤镜。
1.png背景透明
解决办法:

#div1 { 
height: 600px; 
width: 260px; 
padding: 20px; 
background-repeat: repeat; 
} 
html>body #div1 { 
background-repeat: repeat;background-image: url(bj1.png); 
} 
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png") 
}

附加:IE才识别的通配符(*),来定义IE浏览器中的滤镜
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>)
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false

true : 默认值。滤镜激活。

false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。

image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
2.png图片透明
如果在网页中直接插入png图片想使其透明只需加入以下js代码,整个页面内的所有直接插入的png图片都可以实现透明:

<script language="JavaScript"> 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
var arVersion = navigator.appVersion.split("MSIE") 
var version = parseFloat(arVersion[1]) 
if ((version >= 5.5) && (document.body.filters)) 
{ 
for(var j=0; j<document.images.length; j++) 
{ 
var img = document.images[j] 
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.cssText 
if (img.align == "left") imgStyle = "float:left;" + imgStyle 
if (img.align == "right") imgStyle = "float:right;" + imgStyle 
if (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 = strNewHTML 
j = j-1 
} 
} 
} 
} 
window.attachEvent("onload", correctPNG); 
</script>
Javascript 相关文章推荐
JS对象与JSON格式数据相互转换
Feb 20 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
详解JS预解析原理
Jun 16 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 #Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 #Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 #Javascript
Javascript String.replace的妙用
Sep 08 #Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 #Javascript
javascript 流畅动画实现原理
Sep 08 #Javascript
javascript 定义初始化数组函数
Sep 07 #Javascript
You might like
实用函数9
2007/11/08 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
浅谈PHP进程管理
2019/03/08 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
对Python 语音识别框架详解
2018/12/24 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
详解python如何引用包package
2020/06/07 Python
python Pexpect模块的使用
2020/12/25 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
python实现简单的学生管理系统
2021/02/22 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
大学生社团活动总结
2014/04/26 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
高中班主任评语
2014/12/30 职场文书
西湖英语导游词
2015/02/06 职场文书
听证会主持词
2015/07/03 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis