Html 让我制作的CSS精灵工作时遇到的问题

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

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

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

测试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

图像吗？

如果这是您的整个CSS，那么您缺少一些东西。下面是一个使用标记和CSS（带有硬编码背景图像）的小把戏：

您需要指定元素

宽度

和

高度

（现在，它们是

1x1

）以及背景图像的偏移量（如果有）

更新的CSS：

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

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

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

---

希望这有帮助

您的gif只有1px乘1px。因此，您的bg图像将不可见。您需要在css中设置维度，或者提供具有正确维度的gif

例如，如果您的背景图像/精灵是50px乘以50px，则可以执行以下操作：

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

或

---

我认为base64字符串代码根本不起作用，通常字符串比你的长得多，即使是小图片，也比你的短得多。你能把相关代码放在一个文件夹中让我们看一下吗？这比我们自己想象的要容易得多。@flowstoneknight我不知道如何在Fiddle上包含精灵图像，因为我无法再现场景，不管怎样，只需获得一个简单的HTML标记，包括CSS，其他什么都不包括，使用我在主屏幕上留下的相同图像topic@Allan看一看，这不是我在base64中使用的相同字符串，而是短到所有字符串都需要具有相同的高度/宽度，或者可以不同？它们可以不同-这将根据您的需要而定！我将用不同大小和偏移量的其他元素更新小提琴。谢谢让我知道检查@ReynierPM我在我的小提琴上使用了你的标记（透明1x1二进制64图像）-我实际上认为这是“sprite.png”的问题。你能确认文件正在加载吗？（如果你熟悉Chrome开发者工具，你可以检查以确保它是被请求的。）你能看一下吗？应该有精灵，如果你检查代码，你会看到CSS和路由加载，在localhost（dev服务器）中，它可以工作，但在prod服务器中没有，我不知道原因，有什么建议吗？

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

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