使用CSS实现图片遮罩在Chrome浏览器中无法生效

以下是针对你代码问题的排查和修复方案：

核心问题：遮罩属性应用对象错误 #

你当前把mask相关属性加在了父<div>上，但<img>是替换元素，父元素的遮罩不会自动作用于子元素的图片内容。需要直接将遮罩类应用在<img>标签上。

修正后的代码 #

CSS #

.mask1 {
  -webkit-mask-image: url(feather.png);
  mask-image: url(feather.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 可选：优化遮罩显示效果 */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

HTML #

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

额外排查点 #

• 遮罩图片路径验证：打开Chrome开发者工具的「网络」面板，确认feather.png是否成功加载。如果路径错误，调整为正确的相对/绝对路径。
• 遮罩图片格式：确保feather.png带有透明通道，CSS mask是基于图片的alpha值生效——白色/不透明区域显示图片内容，透明区域隐藏对应部分。
• Chrome版本兼容性：确保使用的Chrome版本支持标准mask属性（Chrome 86+已全面支持，旧版本可能需要依赖-webkit-前缀，但你的代码已包含前缀，此问题概率较低）。

内容的提问来源于stack exchange，提问作者fadhi