图像中的透明背景颜色

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">

有哪些函数或属性可以实现这个功能？

- naser

---

我知道可以用Photoshop做到这一点，但我想用CSS代码实现... - naser

不需要在CSS中进行操作。您需要编辑图片并制作一个透明背景。 - trutheality

顺便提一下，Internet Explorer可以使用hacky Chroma filter在CSS中处理这个问题。 - Simon

这可能有点不切实际，但是您可以使用 HTML 的 <canvas> 元素。您可以将图像加载到画布中，并移除所有的白色像素。 - starbeamrainbowlabs

Answer 1

在CSS中添加以下行：

mix-blend-mode: multiply;

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

- Krishnamoorthy

Answer 2

我认为没有任何JavaScript或HTML或CSS属性、特性或功能可以做到您所要求的事情。

您需要在图像编辑器中删除背景，并将图像保存为.GIF格式，或者PNG格式并选择透明背景。

我曾经使用Paint.Net 来完成此操作，但是您也可以使用您拥有的任何图像编辑器来完成。

- Edgar Hernandez

---

我会推荐使用PNG格式，它允许半透明像素和透明像素。 - Fenton

我尝试了png和gif格式，但是这两种格式都不允许我插入具有透明背景的图像，并且在将它们插入到我的HTML文档后仍然保持透明。 - Nick Res

Answer 3

你只能通过PNG格式的透明图像查看透明的图像。在你的例子中，你使用的是JPG格式，无论你做什么都无法实现透明效果（除非你使用CSS中的不透明度属性）。如果想要得到想要的结果，请使用.gif或.png保存图像。

- Ryan

Answer 4

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

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

- Devender

Answer 5

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

- Muerten

Answer 6

以下是一种实现方法。

1. 在画布上绘制您的图像。

2. 删除所有白色（或首选颜色）像素。

- Charlie