在 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>