web-frontend

How remove background from an image work?


When building my website, i faced an image with some text in it.

But the text only display when i changed background-color to black. After some research, i think ít's a transparent image, and we have some online tools to replace background image.

Anyone know how remove background from an image really work ?

And why it make the text showed up ?

This is my image.

updated: Sorry, my question is not clear. Here is my code

https://codepen.io/ging2507/pen/wvWJeyR

when i remove comment of navbar, the Text of image show up(not the normal text 123131). And i dont know why this happened

.navbar {
  background-color: #14425D;
}

Solution

  • The image doesn't change at all. It just has some pixels that are marked as transparent.

    Consider a sheet of glass. Paint on it using white paint. Put it on a sheet of white paper. Now you can't see what was painted on it. Replace the white paper with black paper. Not you can see what was painted on it.