实现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鼠标和滚轮事件
Jun 27 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
请求时token过期自动刷新token操作
Sep 11 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
javascript学习之闭包分析
2010/12/02 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
工作决心书
2014/03/11 职场文书
《称象》教学反思
2014/04/25 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
材料采购员岗位职责
2015/04/03 职场文书
实习单位意见
2015/06/04 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle