跨浏览器 css 掩码

Question

我正在尝试在带有图像的 svg 中的 css 中创建一个 mask。

--> 我在 2 个 svg 之间插入一张图片（在一个文件中）

我添加了一个 class crop-image 像这样

<image id="image-front" xlink:href="" class="crop-image" />

这是我的 class:

mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
-webkit-mask: url("/wp-content/themes/customtheme/assets/images/crop_image.svg");
height: 100%;
width: auto;

此代码在 firefox 上运行良好，但在 chrome 或 safari 上不起作用。 class 没有在我的 svg 中调用，但即使我在我的 svg 中手动复制这个 class，它也不起作用

Answer 1

CSS 中的遮罩是使用 mask-image 属性完成的，必须提供图像作为遮罩。图像遮罩中任何 100% 黑色的东西都完全可见，任何 100% 透明的东西都将完全隐藏，任何 in-between 的东西都会部分遮住图像。 CSS 中的线性和径向渐变是生成的图像，因此它们可以用作图像遮罩。使用遮罩元素的 SVG 也可以用作图像遮罩。

Answer 2

根据 caniuse，mask 在 Firefox 之外不受支持。对于 Chrome 和 Safari，您可以使用 mask-image.

跨浏览器 css 掩码

cross browser css mask

css

svg

cross-browser