css - IE 的视差、蒙版、过渡(天哪!)，无需裁剪

Question

我认为我面临着一种独特的情况，主要是因为我找不到任何可以帮助我解决这个问题的方法。我正在尝试在蒙版元素内添加视差效果。在元素可以......“视差？”之前......它必须滑入视野，在蒙面容器内。

在 Chrome 中，我没有任何问题，因为我可以使用:

-webkit-mask-image: url(path/to/image.png);

对于 Firefox，我没有任何问题，因为我可以使用:

<svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></defs></svg>

并将 svg 剪辑应用于容器，这将为较大的元素创建 mask :

clip-path:url("#clip-elem");

对于 IE 10 和 11 支持，创建 mask 效果的唯一可行解决方案是使用裁剪。这给人一种 mask 的错觉，但实际上会剪裁元素。一旦它开始向上或向下滑动，您会立即看到它被切断，因为它移动到应该遮盖的区域之外。

任何人都可以在 IE 中提供一个工作示例(或见解)，即在不使用裁剪的情况下使用上下动画 (translateY) 的元素进行 mask 吗？

Answer 1

IE 不支持 CSS 屏蔽或剪裁成任意形状。如果您需要屏蔽 HTML 元素，也许您能做的最好的事情就是在您的元素前面放置一张背景颜色带有透明孔的图像。

或者，也许您可​​以使用矩形裁剪区域而不是三 Angular 形来使用 IE。

或者最后一个选项是将所有内容都转换为 SVG。裁剪和 mask 在 SVG 中起作用。