问题得到CSS精灵使我工作

Question

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

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

由于src不能为空，我在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