如何使用图片中没有边框的CSS Sprite

Question

我正在尝试使用Sprite图片优化我的网站。

我为图片使用png格式，图片如下：

我的代码css是这样的：

.bg-upperbar_1 {
    width: 55px; height: 55px;
    background: url('../../assets/img/home/spritesheet.png') -10px -10px;
}

我的html是这样的：

<a class="home-upperbar home-top" href="<?php echo site_url('products/collection_watches'); ?>">
<img class="bg-upperbar_1">
</a>

但是当我尝试加载页面时，即使图片是png，我也会得到图片的边框，例如：

如何解决这个问题？

Answer 1

获得边框的原因是因为您的<img>没有设置src属性。如果要将精灵表用作背景图像，则必须将其附加到<a>标签上。

.bg-upperbar_1 {
    width: 43px;
    height: 45px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px -42px;
}

a{
display:block;
}

<a class="home-upperbar home-top bg-upperbar_1" href="<?php echo site_url('products/collection_watches'); ?>">
</a>