注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

不透明的雾的博客

人生是一次记忆的旅行

 
 
 

日志

 
 
 
 

使用AlphaImageLoader Filter在IE中装载透明的PNG图像  

2006-09-15 12:02:20|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近在做一个页面的时候参考了Yahoo!首页的设计
对页面上部的图片,另存之后是这样子:

  使用AlphaImageLoader Filter在IE中装载透明的PNG图像 - 不透明的雾 - 不透明的雾的博客

在Firefox上浏览一切正常,而在ie上看则显示为灰色边框。

看了CSS代码后知道原来应用了CSS Hacks
#searchIE{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://us.i1.yimg.com/us.yimg.com/i/ww/thm/2/search_1.1.png", sizingMethod="scale");}
除了将其用于页面布局的时候很不错之外,还可以有很多其他用途:
比如防止图片被另存等……


使用方法:

HTML
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" ... >

Script
object.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"

Possible Values

sProperties String that specifies one or more properties exposed by the filter.

Remarks

The src property has no default and must be defined for this filter to affect the object's display.

Transparency for PNG images is respected during text selection. This means the user can select content that is displayed behind the fully transparent region of a PNG image.

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

You can assign multiple filters or transitions to an object by declaring each in the filter property of the object. The following div declaration assigns two filters and a Wheel transition to a div element.

<DIV STYLE="width:100%; filter:
progid_DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
progid_DXImageTransform.Microsoft.Blur(pixelradius=2)
progid_DXImageTransform.Microsoft.Wheel(duration=3);">
Blurry text with smudge of gray.</div>
When multiple filters are applied to an object, each filter is processed in source order, with the exception of procedural surfaces, which are computed first. To emphasize a filter's effect, place it last in source order or on the object's parent. Always place transitions last in source order.

Example

This example loads a div element with an image expanded to a 250-pixel square. Using the sizingMethod property, the button causes the image to change between the default, 100-pixel size and the expanded, 250-pixel size. The filters collection is used to reference the div element's filter properties. To use this sample code a valid image path must be placed in the src property of the AlphaImageLoader filter.

<SCRIPT>
var bToggle = 1

<!-- Toggle the sizingMethod property to resize the image. -->
function fnToggle(oObj) {
if (bToggle) {
bToggle = 0;
oDiv.filters(0).sizingMethod="image";
oObj.innerText='Enlarge It';}
else {
bToggle = 1;
oDiv.filters(0).sizingMethod="scale";
oObj.innerText='Make Normal';}
}
</SCRIPT>

<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >
</DIV>

<BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>

Applies To

  A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, IFRAME, I, INS, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TH, TD, TT, U, UL, VAR, XMP

This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.


参考:
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp
  评论这张
 
阅读(404)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017