实现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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
js实现不重复导入的方法
Mar 02 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
暑假实习求职信范文
2013/09/22 职场文书
小学生交通安全寄语
2015/02/27 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
小学安全教育主题班会
2015/08/12 职场文书
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL