css - 有没有办法让 CSS 属性 mask-image 响应？

Question

我希望这张图片扩大页面的宽度。我怎样才能让面具也扩大？如果我将宽度/高度属性设置为 100%，则蒙版不会缩放，它只会重复。

这是我正在尝试做的一个例子。 http://cdpn.io/tHimv

Answer 1

img {
  width: 100%;
  height: 100%;

  -webkit-mask: url('http://test.com/mask.svg') center center / cover;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

Answer 2

好的，我使用的是 Firefox，其中 -webbit- 代码当然不起作用。

这个尺度-webkit-mask-size: 100% 100%

如果您想要更多跨浏览器解决方案，您可以查看此链接http://thenittygritty.co/css-masking