如何在css中设置mask-image的宽度和高度？

Question

我有一张 div 图片使用 -webkit-mask-image CSS 但我无法为这个 -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，像这样：

mask-size: 50px 50px;

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

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

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

如何在css中设置mask-image的宽度和高度？

How to set width and height of mask-image in css?

css

css-mask