filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
微软的专用属性 alpha image loader filter 经常用来解决( work around ) 在 IE6/Win 中支持的 the missing 32-bit PNG alpha transparency (24-bit + 8-bit alpha channel) 。
AlphaImageLoader filter is a "procedural surface" (程序面),它 “在对象的背景和内容 (between object background and content)” 之间显示图片 。
Problem: Links don't work
在一个应用了 filter 的元素上放置一个链接,可能导致链接不能使用。有两种不同的解决办法:
- filter被加到一个静态元素上。这里,链接的问题可以通过增加 a{position:relative;} 来解决,有时需要绑定 z-index 。
- filter被加到一个绝对定位或相对定位元素上。当链接放到一个不是完全透明的区域时,链接不能点击 (see test A, orange area) 。 position: relative/ z-index-hack 在这种情况下不起作用,解决办法是改变标记 (markup) ,看下面的解决方法 (workaround) 和生成步骤。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css"">
body {
background: #404040;
color: #F0F0F0;
font: 100.01%/1.5 Optima,'Lucida Grande','Luxi Sans',Lucida,'Lucida Sans Unicode',sans-serif;
margin: 0;
padding: 100px 10em;
}
.section {
position: relative;
height: 15em;
width: 21em;
margin-bottom: 1em;
}
.dim {
height: 200px;
width: 200px;
}
.container {
background-image: url("yingyang.png");
position: absolute;
overflow: hidden;
}
a {
color: #D0D0D0;
text-decoration: underline;
position: relative;
}
ul{
margin: 0;
padding: 0;
}
ul a span {
letter-spacing: 100em;
}
</style><!--[if lt IE 7]><style>
.filter {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yingyang.png', sizingMethod='crop');
}
.container {
background-image: none;
}
</style><![endif]-->
</head>
<body>
<div class="section">
<div class="container dim filter">
<ul>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
</ul>
</div>
</div>
</body>
</html>
Workaround for "positioned filters"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css"">
body {
background: #404040;
color: #F0F0F0;
font: 100.01%/1.5 Optima,'Lucida Grande','Luxi Sans',Lucida,'Lucida Sans Unicode',sans-serif;
margin: 0;
padding: 100px 10em;
}
.section {
position: relative;
height: 15em;
width: 21em;
margin-bottom: 1em;
}
.dim {
height: 200px;
width: 200px;
}
.container {
background-image: url("yingyang.png");
position: absolute;
overflow: hidden;
}
a {
color: #D0D0D0;
text-decoration: underline;
position: relative;
}
ul{
margin: 0;
padding: 0;
}
ul a span {
letter-spacing: 100em;
}
</style><!--[if lt IE 7]><style>
.filter {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yingyang.png', sizingMethod='crop');
}
.container {
background-image: none;
}
</style><![endif]-->
</head>
<body>
<div class="section">
<div class="container dim">
<ul class="dim filter">
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
<li><a href="#">link<span> </span></a></li>
</ul>
</div>
</div>
</body>
</html>
修复这个bug的一般步骤
</div>
Step 1 : 建立一个 inner wrapper
</div>
Step 2: Apply hasLayout = true to the inner wrapper
#posbox计算出来的尺寸可以通过 width/height 来获得,或者通过它的 content 。如果设置 width/height ,使用跟 #innerwrap一样的高度 和/或 宽度,最后,可能需要 paddings 来移动。或者,仅仅根据 #posbox的内容来设置高度 ,给 #innerwrap 使用 zoom:1;
Step 3: 把 filter 从 定位盒子移动到 the inner wrapper.
Step 4: 给链接设置 position: relative; z-index: 1;
Problem : The filter does not apply at all
很多原因会导致这个问题。从头开始检查。
- 使用filter的元素是否具有 "layout" 。
Problem : background-position, background-repeat, background-attachment do not work
Problem : filter 不能通过验证
当然不能。这是Microsoft的专有扩展。可以把它们放到一个外部文件里,使用IE-hacks ,然后通过条件注释把它们引入。
Script resources
- Angus Turnbull: IE PNG Alpha Fix behavior.
- Erik Arvidsson: PNG behavior.
- Dean Edwards: PNG Transparency (part of the “IE7” JavaScript library).
Alternatives (替代选择)
我想知道是不是有人尝试用一个差不多是 100% 透明效果的单一color的 PNG/GIF 图片。
Notes on this filter concept
尽管我试着回答经常被问的问题,我不主张使用这个专有扩展。IE6不支持 32-bit PNG alpha channel 透明。具有 "layout" 的元素使用filter ,并且和事件响应交互。这是个buggy 的观念。filter 不是透明背景,它是一个远离规范的元素。
新手只是想要个好看的透明效果。他们经常以使用 IE版本 hack 为终点,对他们来说这点学习曲线太陡了。高水平的人会不使用那些filter设计一个有吸引力的布局。
最后,我主张 "degradation without grace" (适当的降级) ,我认为这对于IE6来说是合适的。
原文地址: