很多大型网站上都使用到了这个滤镜,它是IE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
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');}
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也不能使链接复原。建议使用浮动办法处理。
具体操作:
为预览区域(比如要在某个 div 中预览)添加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。
MSDN原文
分享到:
相关推荐
CSS滤镜主要通过两种方式实现:CSS3标准滤镜和老版的AlphaImageLoader滤镜。IE9及以下版本主要支持后者,而IE10开始逐渐向CSS3标准过渡。 1. **CSS3滤镜**:这是现代浏览器广泛支持的标准,例如`filter`属性,可以...
DXImageTransform.Microsoft.AlphaImageLoader滤镜提供了透明效果、图片的显示尺寸调整以及图片路径的指定等功能。需要注意的是,这种方法属于浏览器特定的解决方案,不能在非IE浏览器上使用。 在实现图片预览功能...
在压缩包内的“滤镜.txt”文件中,你将会看到每种滤镜的具体用法和示例代码,这对于修复老网站或兼容旧浏览器的开发工作非常有帮助。不过,由于这些滤镜仅适用于IE浏览器,所以在其他现代浏览器中可能无法正常工作。...
综上所述,针对"IE6下pgn图片透明"的问题,我们可以采用多种策略,如CSS滤镜、AlphaImageLoader、JavaScript库或者调整图片格式,以实现跨浏览器的透明效果。在开发过程中,要兼顾到兼容性和性能优化,以提供最佳的...
这段代码遍历所有图片元素,检测其是否为PNG格式,如果是,则创建一个新的`<span>`元素替换原图片,应用`DXImageTransform.Microsoft.AlphaImageLoader`滤镜。 ```html <!--[if IE 6]> function correctPNG() {...
在这里,我们使用了Microsoft AlphaImageLoader滤镜,它可以在`div`元素中加载图片,并通过`sizingMethod`参数控制图片的缩放方式。 ##### 3. JavaScript逻辑处理 最后是核心的JavaScript代码,用于实现图片预览...
函数的工作机制是利用IE浏览器特有的滤镜(filter),特别是针对PNG图片使用DXImageTransform.Microsoft.AlphaImageLoader滤镜。当一个PNG图片被检测到,这个脚本会用一个`<span>`标签包围原始的`<img>`标签,并给`...
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL ); ``` `enabled`参数决定是否启用滤镜,`sizingMethod`可以设置为`crop`或`scale`来控制图片...
而为了兼容IE6-IE9,可以使用DXImageTransform.Microsoft.AlphaImageLoader滤镜来加载图片,这是一个已经废弃的技术,但在某些旧版IE浏览器中仍是必要的。 #### 二、插件制作过程 1. **HTML布局** 实现图片预览...
本文将详细介绍一种基于IE滤镜(Internet Explorer Filter)的技术——`AlphaImageLoader`,它能够实现在不同浏览器环境下的背景图片自适应调整功能。 #### AlphaImageLoader 滤镜概述 `AlphaImageLoader`滤镜是IE...
首先,要解决IE8下的png黑色边框问题,最根本的是要使用IE特有的滤镜(filter)技术,即DXImageTransform.Microsoft.AlphaImageLoader滤镜。该滤镜可以使得PNG图片在IE8中正确显示,包括其透明度效果,而不像其他...
IE6中解决PNG24透明问题的一个常见方法是使用AlphaImageLoader滤镜。这个滤镜允许IE6处理PNG图片的透明度。在CSS中,可以这样设置: ```css img.ie6png { filter: progid:DXImageTransform.Microsoft....
1. AlphaImageLoader滤镜:这是微软为IE6提供的一种内建滤镜,可以通过CSS样式来应用。例如: ```css background-image: url('image.png'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image...
为了解决这个问题,开发者们发明了一种滤镜技术,即`DXImageTransform.Microsoft.AlphaImageLoader`滤镜,来实现PNG-24的透明效果。下面我们将深入探讨这一技术及其使用方法。 首先,让我们看下如何在CSS中应用这个...
这段CSS会告诉IE6使用AlphaImageLoader滤镜来加载指定的PNG图像,并应用透明效果。`sizingMethod`参数可以是'crop'或'scale',根据需求选择合适的图像裁剪或缩放方式。 另外,还可以使用JavaScript库,如DD_...
在处理PNG透明问题时,我们主要用到的是`filter`属性中的`progid:DXImageTransform.Microsoft.AlphaImageLoader`。这个滤镜可以加载一个透明的PNG图像,并使其在IE6中显示为透明。 下面是一个示例代码: ```html ...
这段代码告诉IE6使用AlphaImageLoader滤镜来加载指定的PNG图片,并通过`sizingMethod`参数控制图片的大小。`scale`表示保持原始比例缩放图片,还有其他选项如`crop`可以裁剪图像。 另外,为了确保非IE浏览器不受...