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

【问题标题】：How to set width and height of mask-image in css?如何在css中设置掩码图像的宽度和高度？
【发布时间】：2019-11-15 01:06:13
【问题描述】：

我有一个使用 -webkit-mask-image CSS 的带有图像的 div 但我无法为这个 -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');
}

&lt;div class="img"&gt;&lt;/div&gt;

【问题讨论】：

标签： css css-mask

【解决方案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

【讨论】：

太棒了...以及如何将宽度和高度设置为唯一尺寸。？我的意思是如果我设置 30px 宽度高度也必须减少取决于宽度
@mans 你可能在找-webkit-mask-size: contain; ?

【解决方案2】：

你需要使用 mask-size，像这样：

mask-size: 50px 50px;

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

在此处了解有关这些属性的更多信息：

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

【讨论】：