实现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检查日期格式的函数[比较全]
Oct 17 Javascript
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
JavaScript 判断浏览器是否是IE
Feb 19 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中动态显示签名和ip原理
2007/03/28 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js 深拷贝函数
2008/12/04 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
初中生思想道德自我评价
2015/03/09 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python