实现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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
vant时间控件使用方法详解
Dec 24 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
jquery实现图片随机排列的方法
2015/05/04 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
详解vue组件基础
2018/05/04 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
python多线程用法实例详解
2015/01/15 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python操作qml对象过程详解
2019/09/26 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
元宵节主持词
2014/03/25 职场文书
珍惜资源的建议书
2014/08/26 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
党小组评议意见
2015/06/02 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
Redis 异步机制
2022/05/15 Redis