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，其中-webit-code当然不起作用。

这会缩放-webkit-mask-size: 100% 100%

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

有没有办法使CSS属性掩码图像响应？

2 个答案: