如何在图像中使用没有边框的 CSS sprite答案

【问题标题】：How to use CSS sprite without a border in image如何在图像中使用没有边框的 CSS sprite
【发布时间】：2019-05-16 06:00:43
【问题描述】：

我正在尝试使用精灵图像来优化我的网站。

我的图片使用的是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，我也会得到图片的边框，如下所示：

如何解决这个问题？

【问题讨论】：

嗨，Misdan，您有我们可以检查的网址吗？我认为这只是图像周围的边框
图片是否在中？
@MrLister 是在标签中
@Misdan border:0; 去掉边框就够了，添加样式

标签： css sprite

【解决方案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>

【讨论】：