Question

我使用this在线网站制作了一个CSS精灵。 Here是我正在使用的文件。这就是我现在在HTML标记中所拥有的：

<img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" title="" class="e-shop" />

由于src不能为null，我在base64中设置了一个空的GIF。现在，问题是未加载sprite.png文件。所以我将原始代码修改为：

.contactenos, .contactenos-1, img.e-shop, .e-shop-1, .faq, .faq-1, .fctjur, .fctjur-1, .fctnat, .fctnat-1, .vendidos, .vendidos-1{
    background: url(sprites.png) no-repeat;
}

但它没有用，也许我做错了，这是我第一次这样做，有什么建议或帮助吗？

测试1

我对原始CSS进行了一些更改，如下所示：

.contactenos, .e-shop, .faq, .fctjur, .fctnat, .vendidos {
    background: url(sprites.png) no-repeat;
}

.e-shop{
    background-position: -198px -2px ;
    width: 128px;
    height: 50px;
}

.e-shop:hover {
    background-position: -200px -56px ;
    width: 128px;
    height: 50px;
}

但仍然无效，问题是微小的默认src图像？

Answer 1

如果这是你的整个CSS，那么你就错过了一些东西。这是使用标记和CSS（带有硬编码背景图像）的小提琴：

http://jsfiddle.net/5jvdmzgc/

您需要指定元素width和height（现在，它们是1x1）以及背景图片的偏移量（如果有的话）。

更新了CSS：

width: 150px;
height: 50px;
background-position: -70px -120px;

更新了指定不同尺寸的小提琴：

http://jsfiddle.net/5jvdmzgc/1/

您可以使用您编写的CSS作为“基础”（指定图像源），然后使用单个类（宽度/高度/ bg偏移）扩展它。

希望这有帮助！

Answer 2

你的gif只有1px乘以1px。所以你的bg图像不可见。您需要在css中设置尺寸或提供具有正确尺寸的gif。

例如，如果你的背景图像/精灵是50像素×50像素，你可以这样做：

img.e-shop {
  width: 50px;
  height: 50px;
}

或

<img  class="e-shop" src="
R0lGODlhMgAyAIAAAP///wAAACH5BAEAAAAALAAAAAAyADIAAAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=
" />

Fiddle

我工作的CSS精灵问题

2 个答案: