css - 如何在css中设置掩码图像的宽度和高度？

Question

我有一个使用 CSS 的带有图像的 div， -webkit-mask-image但我无法为这个 -webkit-mask-image 设置宽度和高度，如 css 背景图像......

.img {
  background-color: gray;
  width: 40px;
  height: 60px;
}

.img {
  -webkit-mask-image: url('https://i.ibb.co/6Bkc0h8/gZvK4.png');
          mask-image: url('https://i.ibb.co/6Bkc0h8/gZvK4.png');
}

<div class="img"></div>

Answer 1

您需要考虑mask-size哪些行为类似于background-size. 位置和重复还有一个属性：

.img {
  background-color: gray;
  width: 40px;
  height: 20px;
}

.img {
  -webkit-mask-image: url('https://i.ibb.co/6Bkc0h8/gZvK4.png');
  -webkit-mask-size:contain; /* OR cover OR fixed values */
  
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  
  mask-image: url('https://i.ibb.co/6Bkc0h8/gZvK4.png');
  mask-size:contain; /* OR cover OR fixed values */
  
  mask-position:center;
  mask-repeat:no-repeat;
}

<div class="img"></div>

<div class="img" style="height:60px;"></div>

参考：https ://drafts.fxtf.org/css-masking-1/#positioned-masks

Answer 2

您需要使用掩码大小，如下所示：

mask-size: 50px 50px;

第一个值是宽度，第二个是高度。

有关这些属性的更多信息，请点击此处：

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size