时间戳

首页 > 解决方案 > 在 img 标签中显示的透明 png 下显示彩色背景

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

问题描述

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

考虑到表单标题的布局，它具有颜色#348cd4 的纯色背景，我要求图像是透明的.png，实际图像“内容”（可见部分）纯白色#ffffff。

问题是，在我允许用户查看他们上传的内容的屏幕上，网页只是标准的白色。因此，当标签预加载透明 png 时，它是白底白字，您看不到它。问题是：无论如何，在 css 或纯 HTML 中，我可以强制 img 标签所在的背景为 #348cd4 表格的蓝色吗？如果这不能完成，有没有好的解决方法？我尝试使图像标签所在的 div 具有该背景色，但图像看起来就像我附加的一样（如果您看到图像区域的四个角，您会在下面看到蓝色的微小规格） .

我想，由于 png 是透明的，它只会显示它下面的任何内容，但它就像标签正在创建自己的白色背景一样。

透明png

标签： htmlcss.netasp.net-mvc

解决方案

默认情况下，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>

推荐阅读