网站PNG Logo显示棋盘格背景，如何去除该背景？

架构老林

2026-8-2

解决PNG Logo显示棋盘格问题

排查步骤与解决方案

1. 确认图片本身的透明通道是否正常

打开你的324022-middle.png，用PS、GIMP或在线图片编辑工具检查：图片的透明区域是否真的被设置为透明，有没有误保存为带白色/纯色背景的PNG。如果是图片本身问题，重新导出带透明通道的PNG即可。

2. 匹配网站背景消除棋盘格

棋盘格本质是浏览器对透明区域的占位显示，只要让Logo的透明区域和网站背景一致，就能消除：

如果网站背景是纯色：直接给Logo元素设置与网站背景相同的background-color，替换掉transparent。比如网站背景是#f5f5f5，样式里就写background-color: #f5f5f5;。
如果网站背景是渐变/背景图：给Logo元素设置background: inherit;，让它继承父容器的背景样式，避免透明区域暴露浏览器的占位棋盘格。

3. 优化img标签的冗余样式

用<img>标签展示Logo更合理，删掉不必要的样式（比如background-size: cover对img无效），修改后的代码示例：

<img class="bmw" src="/img/324022-middle.png" alt="bmw">

.bmw{
    width: 95px;
    height: 95px;
    float: right;
    margin-right: 30px;
    margin-top: 17px;
    border: none; /* 移除默认边框 */
    /* 网站是纯色背景的话，添加下面一行 */
    /* background-color: #你的网站背景色; */
}