1


我试图在 IE8 中模拟将 RGBA 背景和框阴影应用于 div 的效果。如果我设置一个不透明的背景，我可以使用微软的“阴影”过滤器来成功实现盒子阴影效果。背景设置为“透明”，我可以通过应用“渐变”滤镜获得 RGBA 背景。但是，如果我尝试像这样组合两个过滤器，

div#translucentBG {
  zoom       : 1;
  background : transparent;

  filter: 
    progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#80464646, EndColorStr=#80464646),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=0),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=90),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=180),
    progid:DXImageTransform.Microsoft.Shadow(Color=#ffffff, Strength=5, Direction=270);
}

那么 div 将具有正确的框阴影但不透明的 #464646 背景。只需删除所有阴影过滤器，神奇地，div 再次变为半透明。这很令人沮丧。由于 IE 完美地分别渲染了这两种效果，我无法想象为什么在组合它们时会失败。我知道可能有可用的解决方法和替代方法，但我真正感兴趣的是为什么上述技术会失败。

4

1 回答 1

3

解释

我设置了这个小提琴供人们查看效果（当然是在 IE8 中）。

我相信原因是渐变注册为“填充”值，当它注册时，阴影本身会在其后面填充实体。这实际上消除了您可能正在寻求的透明度（也就是说，它是透明的，它只是显示到下面的阴影，它是不透明的，因此覆盖了背景）。请注意div，我的示例小提琴中的最后一个根本没有“显示”，因为当“阴影”没有填充时，不会应用投影。

阴影实际上填充在您的渐变后面，这一事实进一步支持了当仅应用 a时，就像在这个小提琴border上的最后一个一样，阴影也“进入”了 div。所以阴影不仅仅是一个“边缘”属性，它不会填充到对象的填充下方。div

箱影比较

这个小提琴显示了box-shadow实现。

请注意，对于的规范与使用 IE过滤器box-shadow看到的行为不同。Shadow您并没有“被 FF/Chrome 中 box-shadow 属性的行为所迷惑，它就像一个边缘属性”，因为它是一个边缘属性。（好吧，也许您误以为 IE 过滤器也能正常工作。）它不会填充到框本身的后面，除非inset关键字是定义的一部分（在这种情况下，它只填充到内部）。box-shadow规范说（强调）：

外部 box-shadow 投射阴影，就好像元素的边框框是 opaque 一样。阴影仅绘制在边框边缘之外：它被剪裁在元素的边框框内。

这正是您在 FF/Chrome 中看到的。IE 过滤器早在很久以前就存在box-shadow了，它的实现方式明显不同。请注意，我在上面的引用中还强调了元素被视为不透明的，这意味着即使 abackground: transparent也会显示阴影（如底部的示例小提琴所示）。这也不同于 IEShadow过滤器。

于 2012-07-04T00:08:20.180 回答