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然后，只有那时您会看到空白，否则使用精灵不会有任何问题。要么增大图像的大小，要么减小其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">

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

2 个答案: