时间戳

首页 > 解决方案 > 跨浏览器 CSS 掩码

css - 跨浏览器 CSS 掩码

问题描述

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

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

我添加了一个像这样的类裁剪图像

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

这是我的课：

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 中不起作用。在我的 svg 中没有调用该类，但即使我在我的 svg 中手动复制该类，它也不起作用

标签： csssvgcross-browser

解决方案

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

推荐阅读