使用 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 文件的網站並不總是這樣做。

在嘗試各種代碼技巧來解決一個並不存在的問題之前，我應該先尋找明顯的問題。

感謝這么快回復的人，讓我的近視大開眼界！

干杯馬克