Question

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

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

哪些功能或属性可以实现此目的？

Answer 1

我相信没有javascript或HTML的CSS属性，属性或功能可以做你想要的。

您需要在图像编辑器中删除背景，并将图像保存为.gif或png，并保持透明背景。

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

Answer 2

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

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

Answer 3

在css中添加以下行

mix-blend-mode: multiply;

您可以看到背景颜色和白色像素将消失

Answer 4

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

Answer 5

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

Answer 6

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

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

在图像中的透明背景颜色

6 个答案: