使用 CSS Transparent PNG 不显示背景颜色

Question

我已经在谷歌上搜索了几个小时，但发现的建议都没有奏效。 我有一个浅蓝色的页面横幅。 我在上面放置了一个透明的 png 图像文件。 蓝色背景没有显示出来，我只看到透明度所在的白色/灰色棋盘效果。

这很简单。 我有一个在 CSS 中定义的 Div 容器和一个用于 img 的类。 这是CSS

.header-column-small {
    float: left;
    width: 30%;
    background-color: transparent !important;
    }

.header-column-small img {
    width:220px;
    height: 150px;
    object-fit: contain;
    }

背景颜色在父 div 类中进一步定义。

这是 HTML

<div class="header-column-small">
                <img src="books-on-shelf-small.png" />
</div>

这是它的外观截图

我曾尝试在图像类和直接图像容器（标题列小）中使用背景颜色：透明，但没有更好。

任何帮助真的很感激非常感谢马克

Answer 1

好吧，羞愧地低下了头...... :)

原来 PNG 文件根本不是透明的背景图像。 只是对可能正在网上搜索其项目图像的其他人的警告。 声称提供“透明”png 文件的网站并不总是这样做。

在尝试各种代码技巧来解决一个并不存在的问题之前，我应该先寻找明显的问题。

感谢这么快回复的人，让我的近视大开眼界！

干杯马克