0

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

在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 剪辑应用到容器，这将为较大的元素创建掩码：

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

对于IE 10 和 11支持，创建蒙版效果的唯一可行解决方案是使用剪辑。这会产生蒙版的错觉，但实际上会剪辑元素。一旦它开始向上或向下滑动，您会立即看到它被切割，因为它超出了应该被遮盖的区域。

任何人都可以在 IE 中提供一个工作示例（或洞察力），使用不使用剪辑的上下动画（translateY）的元素进行遮罩吗？

4

1 回答 1

0

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

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

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

于 2016-12-28T07:51:01.147 回答