視差，面具，過渡（哦我的！）爲IE瀏覽器沒有剪輯

我面臨我認爲是一個獨特的情況，主要是因爲我找不到任何東西來幫助我這個。我試圖在蒙面元素內添加視差效果。在元素可以......「parallaxed？」之前...它必須滑入視圖中，在蒙版容器內。視差，面具，過渡（哦我的！）爲IE瀏覽器沒有剪輯

在鉻，我覺得沒有問題，我可以使用：

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

對於火狐，我覺得沒有問題，我可以使用：

<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）而不使用剪輯的元素進行屏蔽？

來源

2016-12-28 Webreality

IE不支持CSS遮罩或剪裁爲任意形狀。如果您需要屏蔽HTML元素，也許您可以做的最好的方法是在元素前面放置背景顏色的圖像，並在其中放置一個透明的洞。

或者，也許你可以使用長方形剪輯區域而不是三角形來使用IE。

或者最後一個選項是將所有內容轉換爲SVG。剪裁和遮罩在SVG中工作。

來源

2016-12-28 07:51:01

感謝您的回覆。不幸的是，客戶的需求被置於石頭中，因此沒有辦法與矩形的夾子一起生活。此外，在元素前添加圖像是我的一個想法。但是，該區域太大，在其下面移動的圖像（可能會顯示的圖像）也太大 - 我說的是1000px高，這意味着圖像必須至少2500px高。這會影響性能，更不用說如果瀏覽器擴展，它將不再匹配。 – Webreality

遮蓋圖像（遮罩）只需要與三角形一樣大。您可以使用容器上的「overflow：hidden」剪輯其餘部分。 –

視差，面具，過渡（哦我的！）爲IE瀏覽器沒有剪輯

回答

相關問題