无法在 IE8 中将半透明渐变滤镜与阴影滤镜结合使用

Question

我试图在 IE8 中模拟将 RGBA 背景和框阴影应用于 div 的效果。如果我设置一个不透明的背景，我可以使用 Microsoft 'Shadow' 过滤器来成功实现 box-shadow 效果。背景设置为“透明”，我可以通过应用“渐变”滤镜获得 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 完美地分别渲染了这两种效果，我无法想象为什么在组合它们时会失败。我知道可能有可用的解决方法和替代方法，但我真正感兴趣的是为什么上述技术会失败。

Answer 1

说明

我设置了this fiddle 让人们看到效果（当然是在IE8中）。

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

阴影实际上填充在渐变后面这一事实进一步得到了以下事实的支持：当仅应用 border 时，如在 this fiddle 上的最后一个 div 中，阴影将“进入” “ div 也是如此。所以阴影不仅仅是一个“边缘”属性，它不会填充到对象的填充下方。

盒阴影比较

This fiddle 显示了box-shadow 的实现。

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

外框阴影投射阴影就好像元素的边框框一样 是不透明的。阴影仅绘制在边框边缘之外：它是 剪辑在元素的边框框内。

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