实现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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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中使用Oracle数据库(5)
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php 小乘法表实现代码
2009/07/16 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
javascript event 事件解析
2011/01/31 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python将视频转换为全字符视频
2019/04/26 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
企业形象策划方案
2014/05/29 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
离婚协议书标准格式
2014/10/04 职场文书
销售员态度差检讨书
2014/10/26 职场文书
骨干教师事迹材料
2014/12/17 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
2019感恩宣传标语!
2019/07/05 职场文书