图像中的透明背景颜色

Question

How can I delete or make transparent a specific background color in an image or backgroundimage? For example, I have an image and I want remove all the white pixels in it to show what is "behind" them on the page.

<div style="
    background-color: #F4F4F7;
    background-image: url('wa.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 200px 280px;"
align="left">

What functions or attributes can accomplish this?

Answer 1

add the below line in the css

mix-blend-mode: multiply;

You can see the background color and white pixles will go off

Answer 2

I believe there is no javascript or HTML o CSS property, attribute or function that can do what you are asking.

You need to remove the background in an image editor and save the image as.gif, or png with transparent background.

I use to do it with Paint.Net but you could do it with whatever image editor you have.

Answer 3

When setting the background Property in CSS you can add a transparent background to the div, with the image like this:

#myDiv {
 background:transparent url(myImage);
 }

Answer 4

You can only see through transparent images with PNG format. In your example, you are using a JPG format which does not have the ability to be transparent no matter what you do (unless you're gonna use the opacity attribute in css). Either use.gif or.png when saving an image for you to get the result you want.

Answer 5

The solution I use is to remove the background from the image before using it. You can do it by running the image through remove.bg .

Answer 6

Here is one way you can achieve this.

1. Draw your image on a canvas.

2. Remove all white (or preferred color) pixels.