有没有办法去除网站上图片的背景？

Question

我有一张棋子的图片。我想把这张照片放在一些代表棋盘的背景上。现在，当我放这张照片时，我有这个白色背景。有没有办法（使用HTML、CSS或JavaScript）去除图片的白色背景，只留下那一块？现在看起来像这样：picture.

CSS 文件:

.dark-spot{
    background-color: rgb(209, 139, 71);
}

.spot{
    height: 110px;
    width: 110px;
}

HTML 文件:

<div class="spot dark-spot">
    <img class="img-fluid" src="images/pieces/black-rook-square.jpg">
</div>

Answer 1

您需要使用具有透明背景的 PNG。否则，如果你使用 JPG，你将有一个白色背景。

Answer 2

根据这个answer如果背景是白色的是可能的。

这是一个示例代码：

.dark-spot{
    background-color: rgb(209, 139, 71);
}

.spot{
    height: 110px;
    width: 110px;
}

.spot-image {
    height: 110px;
    width: 110px;
    mix-blend-mode: multiply;
}

<div class="spot dark-spot">
        <img class="img-fluid spot-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAe1BMVEX///8AAAD8/PwFBQX5+fnLy8u+vr4ICAiqqqq6urrk5OTf39+QkJBqamrS0tL19fU2NjaYmJgmJiZiYmKlpaVZWVmKiopAQEDs7OxGRkbY2Nizs7MrKyuBgYHExMSfn58bGxsTExN5eXlQUFAoKChxcXFcXFx8fHwZGRkM760UAAAEoElEQVR4nO3aa2OaOhjA8VxQrFrRWi/V1tr2uLPv/wmXC2ASkO3FCt32/704beMDJw9JHghOCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPyBlFL1f/9S6jAeFeIvzvD4LI2XYuh+fBIlXmRpLFQWfaTM6B4n42nYrlQ6ncMW83N2Go/2IpwRWabqyM9JottrmV8u5UREPVBq4kZXPlbt8Y8otvw5WrojnsZBkMmruHt8PR6GWQbTagRzbVMMFRsptZamfVRHT+bb1SI+w+Lu7jQrfx9XZ5Pra4ASK9/2EJ+/J2ubQe1Yz65MFQ9184dvURf/53JkZp7ws27/IetxVqI+QptjfIk2h23q5m3b+H+uvQwyNL/N6pmoPuwAlvauZeNbzHyeC3+DEfuH8kD5bppO17Npuapi3u0RZdi09xTH4RCa/j/XHViZP+vPprZlIvPcZahzMxi+98/V8Vqe7JrW11NJN3WV/V/ouvGx9wy3MvFe1sZD2Hh23VoG10K+mrjsWodNy0WIeXSqnZvG2Vty+l7zU+I+zdBUFXuXEJtqaln3NngaBJnRWJigUXjgf6KqKFXOE3uqOOtL7xm+J/lpeXYlYxQsQinvbPAhmNBmti5N1C489GzncXQqWbiFHpr3nuE4ysTZ2iv/Ebbk7pa9SOJW8SK2s3SUhJixv48W+vW+0x8p0wzlIc3G1/hZEqazXVSHJ/FEdhaz8Aqa3/p+qlFh+asthbhEDb7EJ/PN3PHi8T+46xV7SmIuAzzfZ+e0V1q+7KM/N2XoMo2MPNiuPzWvV2TR1ZXPcmxkmMtlWEjrtfOSRkbcHXLeGeKfjfqmzHWP5fZZNBiKpyo0rSMxd38/dY/haZgMpy3FJlQNoVLnZuH1TPO6ba1GMbl9VB0iQ3tP7sqw7pa7ed/I0A6PC9u1fl5ehcVQGXaXELOPqDIsbl+KZblFvL0QtfyW7LB7NPO7w9ZuRcVhG1WgMKwqkuljQWg/QGqeMvX0Rob+Lle7uczu63M930xw1X9mlUzFz1atXfdW7VH18KjmZqWyHPhd3q6lTNqGffzmxizZRlwe7foOrdcq3FsPpHX+6XQrkJl11sjQbTOu76jObSn6/eQQiVXS7VJ14ZP3fzduLYdrhqrtQdfYfIF36pNGz7TfFyZ2jbht9HnRHMBcnvdDp2c1b2WbtrDGI9BzEfe+UWu0G+Vecuikki2TLB81G2GnJOok4vt4Y0nbSpQNda8PmIu8CbvlikNr5GPU+6fGeebRrtf8/vL5vf8lSgSvbqMKmVqFYY0tn1Jv8aPPevAa47nXt+Eozm49RkbvzxprVUXzWLtB/hoZCteRezevtHt322Eiq/fFh7aPVzLP7TDqXLeXq8EoNwNdgmvRWRsWb36xpavQycS7/9SeJ/syAyj8N4Fuimn5VnTudDJRrN0sXLXNwOz6peRFfKkMveJ/Kd+mP49bfJMd37Sc7MuR7+Pf27XfRIn95BcSVPbbxMdbVcR+GXwcZ91TfSiutv+8Z93/guMf+PcdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/4ofOSYkVPMxp9cAAAAASUVORK5CYII=">
</div>

Answer 3

您可以使用 CSS mix-blend-mode: multiply 来完成此操作。这将“移除”任何白色（使其透明）并且还会影响任何具有相同透明度的明亮像素，因此像素颜色越接近白色，它就越透明。

body{
  height: 100vh;
  background: linear-gradient(salmon, lightgreen) no-repeat;
}

.piece{
  background: url(https://www.baytree-interiors.co.uk/_uploads/img/products/giant/aged-stone-outdoor-queen-chess-piece-ornament_19661.jpg) 0 0 / 100% 100% no-repeat;
  height: 200px;
  width: 180px;
}

input:checked ~ .piece{
 mix-blend-mode: multiply;
}

<input type='checkbox' id='remove-bg'>
<label for='remove-bg'>Remove chess piece white background</label>
<div class='piece'></div>

我建议您获取 APNG 格式的棋盘图像，该格式已经允许 alpha 通道。我想你可以在网上找到很多这样的 APNG 棋子文件。

Answer 4

显然您使用的是 JPG 图片。 JPG 图像处处都包含颜色，即其中的每个像素都包含特定颜色。要使其适合背景，您必须编辑 JPG 并将所有白色像素转换为背景色。

但是由于您有两种背景颜色，您需要将所有白色像素转换为透明而不是白色。这对于 JPG 图像类型是不可能的，您需要将这些图像转换为 PNG 或 GIF，然后“擦除”白色像素，以这种方式使它们透明。结果将是您的背景图像颜色（棋盘）将在透明位置显示（“通过”）。

有没有办法去除网站上图片的背景？

Is there any way to remove background of the picture on the website?

html

css

transparency

background-color