Html 图像中的透明背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6289592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent background color in image
提问by naser
How can I delete or make transparent a specific background colorin 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?
哪些功能或属性可以实现这一点？
回答by Edgar Hernandez
I believe there is no javascript or HTML o CSS property, attribute or function that can do what you are asking.
我相信没有 javascript 或 HTML o CSS 属性、属性或函数可以满足您的要求。
You need to remove the background in an image editor and save the image as .gif, or png with transparent background.
您需要在图像编辑器中删除背景并将图像保存为 .gif 或具有透明背景的 png。
I use to do it with Paint.Netbut you could do it with whatever image editor you have.
我曾经用Paint.Net 来做，但你可以用你拥有的任何图像编辑器来做。
回答by Krishnamoorthy
add the below line in the css
在css中添加以下行
mix-blend-mode: multiply;
You can see the background color and white pixles will go off
您可以看到背景颜色和白色像素会消失
回答by Devender
When setting the backgroundProperty in CSS you can add a transparent background to the div, with the image like this:
background在 CSS 中设置属性时，您可以为 div 添加透明背景，图像如下：
#myDiv {
background:transparent url(myImage);
}
回答by Ryan
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.
您只能看穿 PNG 格式的透明图像。在您的示例中，您使用的是 JPG 格式，无论您做什么都不能透明（除非您要在 css 中使用 opacity 属性）。在为您保存图像时使用 .gif 或 .png 以获得您想要的结果。
回答by Charlie
Here is one way you can achieve this.
这是您可以实现这一目标的一种方法。
Draw your image on a canvas.
Remove all white (or preferred color) pixels.
在画布上绘制图像。
删除所有白色（或首选颜色）像素。
