实现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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
用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 curl 获取响应的状态码的方法
2014/01/13 PHP
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python读写Excel文件的实例
2013/11/01 Python
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python注释详解
2016/06/01 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
python web框架中实现原生分页
2019/09/08 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
一年级班主任感言
2014/03/08 职场文书
2014年党支部学习材料
2014/05/19 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
内乡县衙导游词
2015/02/05 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript