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" />

我尝试过这么多不同的方式，但是它们都没有用，面具应该允许页面背景通过，它不会。救命啊！

Answer 1

据推测，你出错的地方是，不是在Firefox中测试（the only browser that supports it）。

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

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