html - 让我制作的 CSS Sprite 工作的问题

Question

我使用 this 制作了一个 CSS Sprite 图在线网站。 Here是我正在使用的文件。这是我现在在我的 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 的 fiddle (带有硬编码的背景图像):

http://jsfiddle.net/5jvdmzgc/

你需要指定你的元素 width 和 height(现在，它们是 1x1)以及背景图片(如果有的话)。

更新的 CSS:

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

指定不同尺寸的更新 fiddle :

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

您可以使用您编写的 CSS 作为“基础”(指定图像源)，然后使用单独的类(宽度/高度/背景偏移)对其进行扩展。

希望这对您有所帮助!