实现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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
JavaScript实现打字游戏
Feb 19 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
php tp验证表单与自动填充函数代码
2012/02/22 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
javascript编写简易计算器
2017/05/06 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
党支部换届选举方案
2014/05/08 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
导游词400字
2015/02/13 职场文书
2015年项目工作总结
2015/04/29 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js