有什么方法可以去除网站上图片的背景?

我有一张棋子的照片。我想把这张照片放在一些代表棋盘的背景上。现在,当我放这张照片时,我有这个白色背景。有没有办法(使用 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>
stack overflow Is there any way to remove background of the picture on the website?
原文答案
author avatar

接受的答案

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

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


答案:

作者头像

根据这个 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>
作者头像

您可以使用 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 棋子文件。

作者头像

您需要使用具有透明背景的 PNG。否则,如果您使用 JPG,您将拥有白色背景。