在 img 标签中显示的透明 png 下显示彩色背景

Question

我有一个基于引导程序的 Web 应用程序（在 MVC .NET 中，尽管我认为这并不重要）（我认为这对我的问题来说并不重要）。我有一个区域，用户可以上传图像以叠加在数据收集表单上以对其进行更多个性化。

考虑到表单标题的布局，它具有纯色背景#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>