PNG alpha transparency: AlphaImageLoader filter flaws

最新推荐文章于 2023-08-14 10:36:46 发布

pengju_guo

最新推荐文章于 2023-08-14 10:36:46 发布

阅读量786

点赞数

分类专栏： IE BUG 文章标签： filter wrapper xhtml class microsoft layout

IE BUG 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

Step 1 : 建立一个 inner wrapper

</div>

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

pengju_guo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PNG alpha transparency: AlphaImageLoader filter flaws

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 chan
复制链接

扫一扫

专栏目录