为何原版PNG无法作为CSS背景图/遮罩，上传Imgur后却正常？

我快被逼疯了。一开始以为是遮罩（mask）的问题（现在看来可能还是），但发现原版PNG在某些情况下连background-image都用不了。两张图的唯一区别是后者（Imgur版本）上传到Imgur后被重新保存过。

原版图片 #

Imgur处理后的版本 #

测试代码 #

CSS代码 #

.mask {
  background-color: navy;
  -webkit-mask-size: 144px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-size: 144px;
  mask-repeat: no-repeat;
  mask-position: 0 0;
}
#orig .mask {
  -webkit-mask-image: url("https://i.sstatic.net/ebAGH.png");
  mask-image: url("https://i.sstatic.net/ebAGH.png");
}
#orig .bg {
  background-image: url("https://i.sstatic.net/ebAGH.png");
}
#imgur .mask {
  -webkit-mask-image: url("https://i.sstatic.net/LcBj8.png");
  mask-image: url("https://i.sstatic.net/LcBj8.png");
}
#imgur .bg {
 background-image: url("https://i.sstatic.net/LcBj8.png");
}
/* 页面装饰样式 */
body {
  background-color: #a0a0a0;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
p {
  background-color: white;
  padding: 5px;
}
.mask, .bg, img {
  border: 1px solid black;
  display: inline-block;
  width: 144px;
  height: 144px;
}

HTML代码 #

<div id="orig">
  <p>原版</p>
  <div class="mask"></div>
  <div class="bg"></div>
  <img src="https://i.sstatic.net/ebAGH.png">
</div>
<div id="imgur">
  <p>Imgur版</p>
  <div class="mask"></div>
  <div class="bg"></div>
  <img src="https://i.sstatic.net/LcBj8.png">
</div>

核心疑问 #

• 为什么原版图片无法作为背景图使用？
• 注释掉遮罩相关代码后，背景图又能正常工作了，这是什么原因？

编辑：在Firefox中，背景图可以正常显示，但仍无法作为遮罩使用。
编辑2：这类图片不是个例，也没有损坏，是设计师用Photoshop或Illustrator导出的，其他同类图片都有相同问题。

问题原因与解决方案 #

1. 原版PNG无法正常使用的核心原因 #

浏览器对作为背景图/遮罩的图片格式有更严格的要求，设计师导出的PNG大概率存在以下问题：

• 颜色模式不兼容：PS/AI默认可能导出CMYK模式的PNG，但浏览器仅支持RGB模式的图片用于背景或遮罩；<img>标签的解析逻辑更宽松，所以能正常显示，但background-image和mask-image会加载失败。Imgur在重新保存时会自动将图片转换为RGB模式，因此解决了兼容性问题。
• 透明通道编码问题：部分导出设置会生成非标准的Alpha通道编码，浏览器无法将其解析为遮罩或背景图，但能正常渲染为图片。

2. 注释遮罩代码后背景图恢复的原因 #

当浏览器尝试加载原版PNG作为遮罩失败时，会将该资源标记为“加载失败”并缓存这个状态；后续请求同URL的背景图时，浏览器直接复用了这个失败缓存，导致背景图也无法显示。注释遮罩代码后，浏览器重新发起背景图的请求，绕过了之前的错误缓存，因此能正常加载。

3. 解决方法 #

• 要求设计师导出PNG时，选择RGB颜色模式，并保存为标准的PNG-24格式（带透明通道）。
• 手动转换图片：用PS或在线图片工具打开原版PNG，转换为RGB模式后重新保存。
• 避免依赖第三方平台转码，提前在本地处理好图片格式，确保兼容性。

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