实现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 Array(数组)相关方法简述
Jul 25 Javascript
JS 类型转换常见方法小结
May 31 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 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
DOMXML函数笔记
2006/10/09 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP的几个常用加密函数
2016/02/03 PHP
js加解密 脚本解密
2008/02/22 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
python的else子句使用指南
2016/02/27 Python
python 获取字符串MD5值方法
2018/05/29 Python
python操作excel的方法
2018/08/16 Python
python实现狄克斯特拉算法
2019/01/17 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python编写实现抽奖器
2020/09/10 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
服务型党组织建设典型材料
2014/05/07 职场文书
毕业大学生自荐信
2014/06/17 职场文书
好人好事演讲稿
2014/09/01 职场文书
订货会邀请函
2015/01/31 职场文书
2015年药房工作总结
2015/04/25 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python