您的位置：首页 > 大数据 > 人工智能

PNG alpha transparency: AlphaImageLoader filter flaws

2011-11-11 17:37 295 查看

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"

我提供的解决方法需要给定位的元素增加一个 inner wrapper ，这个inner wrapper 没有任何内在的逻辑含义。必须把这个 filter 从一个绝对定位元素移动到一个 non-positioned子元素上 (子元素必须具有 "layout" ，例如设置一个尺寸) 才能使的链接可以使用，在这个例子中，是ul (see test B) 。当然，作为一种选择，我们可以建立两个独立的绝对定位的容器，一个放图片，一个放链接，然后让它们重叠。
<!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的一般步骤

当有一个 filter 作用在绝对定位或相对定位元素上时，容器包含的链接不能使用。
<div id="posbox">
<a href="#">link</a>
</div>

Step 1 : 建立一个 inner wrapper

<div id="posbox">
<div id="innerwrap">
<a href="#">link</a>
</div><!-- inner -->

</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

是的。filter 不是 background image 。你不能这样这样做。你可以通过设置 filter 的
sizingMethod 属性来改变图像。

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来说是合适的。

原文地址：

http://www.satzansatz.de/cssd/tmp/alphatransparency.html#
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航