图像中的透明背景颜色答案

【问题标题】：Transparent background color in image图像中的透明背景颜色
【发布时间】：2021-05-23 01:28:53
【问题描述】：

如何删除图像或背景图像中的特定背景颜色或使其透明？例如，我有一张图片，我想删除其中的所有白色像素，以显示页面上它们“背后”的内容。

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

什么功能或属性可以做到这一点？

【问题讨论】：

我知道可以通过 photoshop 做到这一点，但我想要 css 中的代码 ...
你不会在 CSS 中这样做。您需要编辑图像并制作透明背景。
Internet Explorer 可以使用 hacky Chroma filter btw 在 CSS 中处理这个问题。
这可能有点不切实际，但您可以使用 html <canvas>。您可以将图像加载到画布中，并删除所有白色像素。

标签： html css

【解决方案1】：

在css中添加下面一行

mix-blend-mode: multiply;

你可以看到背景颜色和白色像素会消失

【讨论】：

【解决方案2】：

我相信没有 javascript 或 HTML o CSS 属性、属性或函数可以满足您的要求。

您需要在图像编辑器中删除背景并将图像另存为 .gif 或具有透明背景的 png。

我以前用 Paint.Net 来做，但你可以用你有的任何图像编辑器来做。

【讨论】：

这个+1 - 我推荐PNG格式，它允许半透明像素以及透明像素。
我尝试了 png 和 gif 格式，但它们都不允许我插入具有透明背景的图像，这些图像在插入我的 html 文档后仍然是透明的。

【解决方案3】：

在 CSS 中设置 backgroundProperty 时，可以为 div 添加透明背景，图像如下：

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

【讨论】：

【解决方案4】：

您只能看穿 PNG 格式的透明图片。在您的示例中，您使用的 JPG 格式无论您做什么都无法透明（除非您要在 css 中使用 opacity 属性）。保存图像时使用 .gif 或 .png 以获得所需的结果。

【讨论】：

【解决方案5】：

我使用的解决方案是在使用之前从图像中删除背景。您可以通过remove.bg 运行图像来做到这一点。

【讨论】：

【解决方案6】：

这是实现这一目标的一种方法。

在画布上绘制图像。
删除所有白色（或首选颜色）像素。

【讨论】：