用 CSS 屏蔽图像在 chrome 上不起作用

【问题标题】：Masking an image with CSS doesn't work on chrome用 CSS 屏蔽图像在 chrome 上不起作用
【发布时间】：2022-11-12 02:34:46
【问题描述】：

演示：

.mask1 {
  -webkit-mask-image: url(feather.png);
  mask-image: url(feather.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

<div class="mask1">
  <img src="camp nou.jpg" alt="barcelona" width="600" height="400">
</div>

【问题讨论】：

标签： html css

【解决方案1】：

&lt;div id="masked"&gt;&lt;/div&gt;

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}


http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.jpg

【讨论】：