实现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验证表单第二部分
Nov 25 Javascript
用htc组件制作windows选项卡
Jan 13 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 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
关于svn冲突的解决方法
2013/06/21 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php制作动态随机验证码
2015/02/12 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
英文版银行求职信
2013/10/09 职场文书
卫生巾广告词
2014/03/18 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
地道战观后感300字
2015/06/04 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js