如何从子画面图像中去除白色边框

Question

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

我确实读过它是由使用image元素引起的，但是，出于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，然后您才会看到空白，否则使用sprite不会有问题。增大图像大小，或减小其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">