jpg 上的 svg 蒙版不起作用

Question

我做错了什么？

<style>
  .masked-element {
    mask-image: url(images-free-tour/cauldron/mask.svg);
    mask-mode: alpha;
  }
   .masked-element image {
    mask: url(images-free-tour/cauldron/mask.svg);
    mask-mode: alpha;
  }
</style>

这是页面正文中的图片

    <img class="masked element" src="images-free-tour/cauldron/cauldron-angel-640.jpg" />

我试过很多不同的方法 none ，掩码应该允许页面背景通过，但事实并非如此。求助！

Answer 1

据推测，您出错的地方是没有在 Firefox 中进行测试（the only browser that supports it）。

Chrome 和 Safari 通过 -webkit- 供应商前缀提供有限支持。 Microsoft 浏览器目前完全不支持它。

此外，匹配 <img class="masked element"> 的选择器是 img.masked.element 而不是 .masked-element image。

jpg 上的 svg 蒙版不起作用

svg mask on jpg not working

html

css

svg

mask