实现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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
bootstrap css样式之表单
Jan 19 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
解读Vue组件注册方式
May 15 Vue.js
用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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python DataFrame 取差集实例
2019/01/30 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python如何实现复制目录到指定目录
2020/02/13 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
期末总结的个人自我评价
2013/11/02 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
联欢会开场白
2015/06/01 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
golang操作rocketmq的示例代码
2022/04/06 Golang