GIMP处理的PNG图片在HTML中丢失透明背景问题求助

• 先排查HTML/CSS样式问题

  • 要是你把图片放在button标签里，默认button自带白色背景和边框，必须给button加样式：background: transparent; border: none;
  • 检查img标签或其容器的CSS规则，有没有误设background-color: white;这类属性，直接删掉或改成transparent

• 重新确认GIMP导出细节

  • 导出前确保图层的Alpha通道已启用（在图层面板里看对应图层的Alpha通道是否存在，右键图层能看到「添加Alpha通道」选项的话，说明之前没加，得补上）
  • 导出PNG时，在弹出的选项框里务必勾选「保存透明度」（部分GIMP版本里这个选项和「不保存背景颜色」绑定，但手动确认更稳妥）
  • 用系统自带的图片查看器打开导出的PNG，如果这里背景还是白色，那就是导出环节出问题，重新导出即可

• 直接可用的CSS修复代码
  如果用图片作为可点击选择项，推荐用button包裹图片，或者把图片设为button背景，示例代码：

  /* 用img标签的情况 */
  .choice-img {
    background: transparent;
    border: none;
    cursor: pointer;
    /* 按需设置宽高 */
    width: 120px;
    height: 120px;
  }
  
  /* 用图片作为button背景的情况 */
  .choice-btn {
    background: url('rock.png') no-repeat center / contain;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 120px;
    height: 120px;
  }
  

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