Microsoft.AlphaImageLoader滤镜讲--透明处理<转>

Microsoft.AlphaImageLoaderIE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。

语法:

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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

特性:

Enabled :  可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod :  可读写。字符串(String)。参阅 sizingMethod 属性。
src :  可读写。字符串(String)。参阅 src 属性。

说明:

在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

示例:

#idDiv{position:absolute; left:140px;
height:400;
width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘rain1977.gif‘,sizingMethod=‘scale‘);}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/earglobe.gif‘);}

MSDN: http://msdn2.microsoft.com/en-us/library/ms532969.aspx

P.S. 当想使用backgroundimage属性时,如果不想让图片原尺寸显示,而是类似于IMG width=100% heigth=100% 的效果,可以通过此filter实现。

Example:
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.jpg‘, sizingMethod=‘scale‘)";

引用:最后说说关于FF和IE效果调和问题。这个滤镜效果只适用于IE,在FF下面无法显示,我想这是前辈说他很难实现的最终问题了。以往我们用*或者_来修复IE下和FF的区别.这一次是要找方法修复FF不能实现的问题.
其实想到的话,也很简单了.就是先让FF正常显示该图片,然后,用*或_ 来清除IE下的显示效果,最后用*或_ 来做以上的滤镜效果。大功告成!

以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,一般情况下的解决办法是为链接或按钮
添加:position:relative使其相对浮动
要注意的是,当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议
使用浮动办法处理。

具体操作:

    1. 为预览区域(比如要在某个 div 中预览)添加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
    2. 为 AlphaImageLoader 设置 src 属性。
时间: 2024-10-17 23:34:40

Microsoft.AlphaImageLoader滤镜讲--透明处理<转>的相关文章

Microsoft.AlphaImageLoader滤镜解说

Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.尽管FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,可是就IE5-IE6而言还是有一定的意义. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 属性: enabled : 可选项.布尔值(Boo

Microsoft.AlphaImageLoader滤镜讲解

Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理.虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 属性: enabled : 可选项.布尔值(Boo

关于ie6中使用css滤镜[_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;images/*.png&#39;,sizingMethod=&#39;scale&#39;)]后链接无法点击的问题

RT,我做的一个效果是试用png图做背景,通过_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/*.png',sizingMethod='scale');来实现,但是使用这个滤镜后,ie6下面的链接.按钮等都失效,无法点击网上搜索很多都是通过给链接加上position:relative;解决 不知道是我ie6绿色版本问题还是其他原因,我代码中加上这句无效…… 另:png透明的层我设置了绝对定位,貌似这个导

【css】ie6下使用css sprit 滤镜做透明图片

.service{ /*position:relative;*/ height:96% !important;overflow: hidden;} .pright{ height:40px; text-align:right; margin-top:30px; padding-right:50px; overflow:hidden; } .pright .btn_order{ background:url('../images/order_icon02.png') 0 0 no-repeat;

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

JS魔法堂之实战:纯前端的图片预览

一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取

JS图片上传预览插件制作(兼容到IE6)

其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会

网页上PNG透明图片的运用(ie6+滤镜)

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用,但由于 IE6 不支持 PNG,所以一直未能得到广泛的应用. 虽然 IE7 已经支持 PNG,但目前 IE6 还是主流,怎么样让 IE6 也使用 PNG 呢?网上有相关的介绍,下面我也尝试做一下介绍,希望在表达上能更加通俗易懂… IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持,虽然 IE5.0 无法支持,但毕竟是非常非常小的一