CSS遮罩图片加载异常：同路径HTML可加载CSS url()失败

尝试通过CSS为图片添加遮罩效果后，图片直接消失，经测试：

• HTML的src属性可正常加载../../resources/mask.png
• CSS的-webkit-mask-image使用同路径同文件时加载失败
• 更换其他图片作为.record_img的src能正常显示，但因遮罩加载失败仍会消失

相关代码：

<img class="record_img" src="../../resources/mask.png" alt="">
<link rel="stylesheet" href="../fragments/css/style.css">
<link rel="stylesheet" href="style.css">

.record_img {
    -webkit-mask-image: url("../../resources/mask.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
}

1. CSS路径基准错误：HTML中src的相对路径以当前HTML文件为基准，但CSS里url()的路径是以CSS文件所在位置为基准，若CSS文件与HTML文件不在同一目录，原路径会失效。
2. 浏览器兼容性与属性缺失：仅使用webkit前缀属性，未添加标准mask-image属性，可能导致部分环境下遮罩逻辑异常。
3. 遮罩图片或请求异常：若图片无透明通道（如JPG）、全黑/全透明，或请求返回404，会导致图片被隐藏或遮罩失效。

• 修正路径并验证请求：
  1. 打开Chrome开发者工具的「Network」面板，刷新页面后搜索mask.png，查看请求状态：
     • 若返回404，根据CSS文件的实际位置重新计算相对路径（例如CSS文件在../fragments/css/时，路径应为../../../resources/mask.png）；
     • 推荐使用根路径（如url("/resources/mask.png")），避免相对路径的基准混淆。
• 完善CSS属性兼容性：
  更新CSS代码，同时添加标准属性：

  .record_img {
      mask-image: url("修正后的路径/mask.png");
      mask-repeat: no-repeat;
      mask-size: 100% 100%;
      -webkit-mask-image: url("修正后的路径/mask.png");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
  }
  

• 排查遮罩图片有效性：
  确认遮罩图片为带透明通道的格式（如PNG），且内容并非全黑/全透明；可替换为已知正常的遮罩图片测试效果。
• 检查样式冲突：
  在Chrome开发者工具的「Elements」面板中，查看.record_img的mask属性是否被其他CSS规则覆盖，如有则调整样式优先级。

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