如何使用css使图像背景应该是透明的?

Question

我有一个图像，图像背景是白色的，在我的网页，背景颜色是#ebf5fc;当我插入图像它不适合正确，所以我需要的是插入的图像应该是一个透明的背景和宽度应该是100%，请帮助我解决这个问题。

* {
background:#ebf5fc;
}
.shape-images {
width:100%;
background: #ebf5fc;
}

<div class="shape-images">
<img src="https://docs.google.com/uc?export=download&id=1ED93sN3oWFtp9fHkAzTLK8Qp0B9Etv4r" />
</div>

Answer 1

可以使用SVG过滤器从HTML中的图像中删除纯色背景，该过滤器可以应用于HTML内容。

我不建议你使用这种方法，在GIMP或photoshop中删除背景或其他可能是你应该解决它的方法，但它是可能的。

.demo_table {
background-color: lime;
}
.remove_white_bg {
filter: url(#remove_white);
}

<svg height="0" style="position: absolute">
<filter id="remove_white">
<feColorMatrix type="matrix" in="SourceGraphic"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
-1 -1 -1 2 0" />
</filter>
</svg>
<table class="demo_table">
<tr><th>original image</th><th>same image + filter</th></tr>
<tr>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Adaxial_side._Leaves_of_trees_in_autumn.jpg/136px-Adaxial_side._Leaves_of_trees_in_autumn.jpg" /></td>
<td><img class="remove_white_bg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Adaxial_side._Leaves_of_trees_in_autumn.jpg/136px-Adaxial_side._Leaves_of_trees_in_autumn.jpg" /></td>
</tr>
</table>

(关于<feColorMatrix>如何工作的更多信息，请参阅此处)

Answer 2

如果图片的背景填充为白色而不仅仅是" transparent ";这是不可能的。不能使用css更改图像的背景颜色。你可以在Photoshop中使用魔术棒或选择工具更改图像，然后输入带有透明背景的图像。

https://photopea.com

如果你不能使用Photoshop，这是一个很好的选择。它是免费的，可以做几乎所有的Photoshop的功能。

Answer 3

background: linear-gradient(0deg, rgba(12,12,12,0.9)， rgba(9,9,9,0.9))， url(../assets/Services/advertising - tsing-agency- ppc -team.jpg);