实现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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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中计算字符串相似度的函数代码
2012/12/29 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
python函数的5种参数详解
2017/02/24 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
介绍一下RMI的基本概念
2016/12/17 面试题
合作意向书模板
2014/03/31 职场文书
优质服务活动实施方案
2014/05/02 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL