CSS设置透明PNG Logo为header背景时显示网格如何消除

问题原因 #

问题核心出在你引用的图片资源本身，而非CSS代码逻辑：你使用的第三方免抠素材站点的预览图，默认在透明区域叠加了灰白棋盘格作为透明标识，这部分图案是直接绘制在图片文件内的，不是真正的透明背景。哪怕你本地存储的是该预览图，也会自带网格效果。

你当前编写的CSS代码不存在语法错误，其余背景相关属性不需要调整。

解决方案 #

• 优先替换图片资源：找到该logo的原始无棋盘格透明PNG素材，上传到你的项目静态资源目录后，替换background-image属性里的URL为本地资源相对路径即可。
• 若找不到原始素材，可使用图像处理工具（如Photoshop、免费在线抠图工具）手动擦除现有图片中的棋盘格，导出为透明PNG后再替换引用。

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