Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
跨浏览器css掩码_Css_Svg_Cross Browser - Fatal编程技术网
Fatal编程技术网
  • css/
  • 跨浏览器css掩码

跨浏览器css掩码

css svg

跨浏览器css掩码,css,svg,cross-browser,Css,Svg,Cross Browser,我试图在带有和图像的svg中创建css中的掩码 -->我正在两个svg之间插入一个图像（在一个文件中） 我添加了一个类裁剪图像，如下所示 <image id="image-front" xlink:href="" class="crop-image" /> 这段代码在firefox上运行良好，但在chrome或safari中不起作用。在我的svg中没有调用该类，但即使我在svg中手动复制该类，它也不起作用CSS中的掩码是使

我试图在带有和图像的svg中创建css中的掩码

-->我正在两个svg之间插入一个图像（在一个文件中）

我添加了一个类裁剪图像，如下所示

<image id="image-front" xlink:href="" class="crop-image" />
这段代码在firefox上运行良好，但在chrome或safari中不起作用。在我的svg中没有调用该类，但即使我在svg中手动复制该类，它也不起作用

CSS中的掩码是使用mask image属性完成的，并且必须提供一个图像作为掩码。图像遮罩中的任何100%黑色都将完全可见，任何100%透明的都将完全隐藏，介于两者之间的任何内容都将部分遮罩图像。CSS中的线性和径向渐变是生成的图像，因此它们可以用作图像遮罩。使用掩码元素的SVG也可以用作图像掩码。

根据，firefox之外不支持
掩码。对于Chrome和Safari，您可以使用
遮罩图像


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;