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

Question

I have a web application (in MVC .NET, even though I dont think it matters here), thats built on bootstrap (which again I dont think matters much to my question). I have an area where a user can upload an image to superimpose over a data collection form to personalize it more.

Considering the layout of the form header, which has a solid background of color #348cd4, I ask for image to be a transparent.png, with the actual image "content" (visible pieces) pure white #ffffff.

The problem is, on the screen where I allow the user to review what they uploaded, the webpage is just standard white. So when the tag is preloaded with the transparent png, its white on white, and you can't see it. The question is: is there anyway in css or pure HTML where I can force the background that the img tag sits on to be the blue of the form #348cd4? And if this cant be done, is there a good work around? I tried making the div that the image tag is sitting in have that background-color, but the image looks like what I have attached (if you see the four corners of the image area, you'll see tiny specs of the blue underneath).

I thought, since the png is transparent, it would just show whatever was underneath it as well, but its like the tag is creating its own white background.

Answer 1

By default, an img tag will not have a background color associated with it. But it is possible that there may a background-color being applied to your images either from bootstrap or some other style sheet that is being loaded. You can apply a background color directly to the PNG or to the div containing it. Below shows an example of both applying a color to the containing div as well as to the image itself. If that doesn't work, you may want to look into making sure the image isn't being altered in the upload process that could be removing the transparency.

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