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 に答える