在 img 標簽中顯示的透明 png 下顯示彩色背景

Question

我有一個 web 應用程序（在 MVC .NET 中，盡管我認為這里不重要），那是建立在引導程序上的（我再次認為這對我的問題並不重要）。 我有一個區域，用戶可以上傳圖像以疊加在數據收集表單上以對其進行更多個性化。

考慮到表格 header 的布局，它具有純色背景 #348cd4，我要求圖像是透明的.png，實際圖像“內容”（可見部分）純白色 #ffffff。

問題是，在我允許用戶查看他們上傳的內容的屏幕上，網頁只是標准的白色。 因此，當標簽預加載透明 png 時，它是白底白字，您看不到它。 問題是：在 css 或純 HTML 中是否有我可以強制 img 標簽所在的背景為 #348cd4 形式的藍色？ 如果這不能完成，有沒有好的解決方法？ 我嘗試使圖像標簽所在的 div 具有該背景色，但圖像看起來就像我附加的一樣（如果您看到圖像區域的四個角，您會在下面看到藍色的微小規格） .

我想，由於 png 是透明的，它只會顯示它下面的任何內容，但它就像標簽正在創建自己的白色背景一樣。

Answer 1

默認情況下， img標簽不會有與之關聯的背景顏色。 但是有可能從引導程序或其他正在加載的樣式表中將背景顏色應用於您的圖像。 您可以將背景顏色直接應用於 PNG 或包含它的div 。 下面顯示了將顏色應用於包含 div 以及圖像本身的示例。 如果這不起作用，您可能需要考慮確保圖像在上傳過程中沒有被更改，這可能會消除透明度。

 .container { width: 100%; background-color: red; display: flex; align-items: center; justify-content: center; } img { padding: 1rem; } img.blue { background-color: blue; }

 <div class="container"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA1CAMAAABlcHtYAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAAN3RSTlMA9QvYBwOp7+vRVCPnzHNrE9y+uIdoGbWsopqOd1tBMzEpH+TFsKWUb1g9n4FjOTeKfl9NRyuAAE2LOwAAAdFJREFUOMu9VGlTwlAMTAttqbRIgXLIpaAcyqGI/v+fZuIulcfhF2fcGSa8bnNt8ir/hPdGt3qNq1c87/EaufEUNxeIsv78qZJxcEaFXjoRqZnr8pRc6sMndc28C1lzc3kWWZjdSgHfim9H+rChh0TtS8FtE6+pxbTo0ldT8YXo6ilHi15P5MEpqaOHUgCXqC6Squ0KMWTjVbNrdFMpHzos6amjfxqwD6ibGNipLXJrcbUUe3klRNvInHFHIndqmnJA81sduAxE1moSUohX0Xp7amciY4swAcUS7lFnrBUyPGGS7XQNrCKGXztJWyL35lLHcVWQc0vGsqvIPS/IASfC3HMbjFNuqpba2IBChyz9kG8OOTSSYccir2eeKfWbuCTiNCmND3HvnFZ6InuTUY+h2n5BNiDCAvLJo9qaI99QwzHX1LbIFR4enxRqczIyP8Iy7SEx0cGwR+zEUmfFpeSarKjT7Hg3a1ywFHoHyVGx5QwrWeX+jlEekPPhgJtpdhoUCuA6xNzBFJMHQigwYoAPWkoQR/0Aly3hVeQVJOjQ4iej51DoJ1IFdlhaFzeYYRBjMi6Cfims87LmcgEUJPN/+bzdXqQgYVyWK1hk6Vj+jC/nHhkNkjIPwgAAAABJRU5ErkJggg=="> <img class="blue" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA1CAMAAABlcHtYAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAAN3RSTlMA9QvYBwOp7+vRVCPnzHNrE9y+uIdoGbWsopqOd1tBMzEpH+TFsKWUb1g9n4FjOTeKfl9NRyuAAE2LOwAAAdFJREFUOMu9VGlTwlAMTAttqbRIgXLIpaAcyqGI/v+fZuIulcfhF2fcGSa8bnNt8ir/hPdGt3qNq1c87/EaufEUNxeIsv78qZJxcEaFXjoRqZnr8pRc6sMndc28C1lzc3kWWZjdSgHfim9H+rChh0TtS8FtE6+pxbTo0ldT8YXo6ilHi15P5MEpqaOHUgCXqC6Squ0KMWTjVbNrdFMpHzos6amjfxqwD6ibGNipLXJrcbUUe3klRNvInHFHIndqmnJA81sduAxE1moSUohX0Xp7amciY4swAcUS7lFnrBUyPGGS7XQNrCKGXztJWyL35lLHcVWQc0vGsqvIPS/IASfC3HMbjFNuqpba2IBChyz9kG8OOTSSYccir2eeKfWbuCTiNCmND3HvnFZ6InuTUY+h2n5BNiDCAvLJo9qaI99QwzHX1LbIFR4enxRqczIyP8Iy7SEx0cGwR+zEUmfFpeSarKjT7Hg3a1ywFHoHyVGx5QwrWeX+jlEekPPhgJtpdhoUCuA6xNzBFJMHQigwYoAPWkoQR/0Aly3hVeQVJOjQ4iej51DoJ1IFdlhaFzeYYRBjMi6Cfims87LmcgEUJPN/+bzdXqQgYVyWK1hk6Vj+jC/nHhkNkjIPwgAAAABJRU5ErkJggg=="> </div>