实现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 学习笔记(六)
Dec 31 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
JavaScript实现分页效果
Mar 28 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php抓即时股票信息
2006/10/09 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP 实现链式操作
2021/03/09 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
理解Javascript闭包
2013/11/01 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
六行python代码的爱心曲线详解
2019/05/17 Python
django框架两个使用模板实例
2019/12/11 Python
python 字段拆分详解
2019/12/17 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
工商企业管理专业自荐信范文
2014/04/12 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
暑期家教宣传单
2015/07/14 职场文书
公司人力资源管理制度
2015/08/05 职场文书