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

Question

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

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>

标签： htmlcsstransparencybackground-color

Answer 1

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

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