实现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判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
聊聊JS ES6中的解构
Apr 29 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中数组定义的几种方法
2013/09/01 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python实现分页效果
2017/10/25 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python的debug实用工具 pdb详解
2019/07/12 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
执行力心得体会
2013/12/31 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android