本地运行W3Schools的CSS PNG遮罩示例失效求助

问题背景 #

将CSS mask-image示例代码复制到本地HTML文件，所需图片（w3logo.png、img_5terre.jpg）与HTML文件放在同一文件夹，但Chrome、Safari、Firefox浏览器中遮罩均无法正常渲染。

使用的代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    .mask1 {
      -webkit-mask-image: url(w3logo.png);
      mask-image: url(w3logo.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <h1>The mask-image Property</h1>
  <h3>An image with a mask layer image:</h3>
  <div class="mask1">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </div>
  <h3>Original image:</h3>
  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>

文件目录说明：HTML文件与w3logo.png、img_5terre.jpg处于同一文件夹下。
渲染效果说明：页面仅显示两张原始图片，未出现遮罩效果。

问题分析 #

代码将mask-image应用在了包裹图片的<div>元素上，但CSS遮罩仅作用于元素自身的可视化内容（包括背景、内容区，不会传递到子元素）。<div>本身无背景或自身内容，因此遮罩无法对内部的<img>生效。

修复方案 #

直接将mask1类应用到<img>元素上，同时补充遮罩位置和大小属性，确保遮罩适配图片：

<!DOCTYPE html>
<html>
<head>
  <style>
    .mask1 {
      -webkit-mask-image: url(w3logo.png);
      mask-image: url(w3logo.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      /* 让遮罩居中并适配图片尺寸 */
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
  </style>
</head>
<body>
  <h1>The mask-image Property</h1>
  <h3>An image with a mask layer image:</h3>
  <div>
    <img class="mask1" src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </div>
  <h3>Original image:</h3>
  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>

额外验证项 #

• 确认w3logo.png是带有透明通道的PNG图片：CSS遮罩依赖图片的Alpha通道，纯白无透明区域的图片无法产生遮罩效果。
• 检查文件名大小写：部分操作系统（如Linux）区分文件名大小写，确保代码中的文件名与实际文件名完全一致。
• 尝试通过HTTP服务器访问：部分浏览器对本地file://协议的资源有安全限制，可使用简易HTTP服务器（如Python的python -m http.server）打开文件测试。

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