如何从精灵图像中删除白色边框

Question

我刚刚开始学习如何使用图像精灵来更好地优化我的网站。但是，在我的图像元素的右侧和底部有这个白色边框。我在这里和谷歌上搜索了帖子，似乎无法弄清楚如何删除边框。

我确实读过它是由使用图像元素引起的，但是，我需要将此元素用于 SEO 目的。通过使用div，它会削弱我在图像方面的 SEO(无论如何我所读到的内容(。谁能帮我弄清楚这一点？它在Chrome和Firefox中都做到了这一点。谢谢

[图像容器右侧和底部的白色边框][1]

<img class="image-sprite" src="">
.image-sprite {
background: url("../images/gallery-sprite.png");
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}

Answer 1

你能把后台URL直接放到HTML的img标签中吗？ 喜欢这个：

.image-sprite {
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}

body{
background-color: gray;
}

<img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">

Answer 2

我在下面发布了一个例子，看看你能在两边找到任何空白吗？问题可能出在您使用的"图像大小"和放置图像的尺寸上。如果你的图像在到达右端或底端时完成，obviously然后，只有这样你才会看到空白，否则使用精灵没有问题。要么增加图像的大小，要么减小其width和height。

.image-sprite {
background: url("https://picsum.photos/200/300");
background-position: -10 -10px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}

<img class="image-sprite">