css - CSS整个精灵图像被加载

Question

我是 CSS sprites 的新手，并试图在 firefox 上使用它们。问题是当我在标签或任何标签上加载精灵时，它会在页面上显示整个精灵图像。

我也尝试使用 text-indent = -9999px 但这没有帮助。该图像仍显示在页面其余部分的顶部。使用 z-index 也无济于事。

#container{
background: url(csg-50e22b073c545.png) no-repeat top left transparent;
overflow: hidden;
}
.bulletform{
background-position: 0 - 1567px;
width: 30px;
height: 30px;
}

所以，我的问题是：1.如何避免显示整个精灵图像？2.我可以只加载一次精灵图像或页面的一些根DIV标签吗？然后使用背景位置在相关位置显示单个图像？

请帮忙。

Answer 1

这不是你使用精灵的方式。您不应该将其加载到任何顶级包装器中。相反，为每个应该使用精灵的元素设置背景图像并调整背景位置。浏览器足够聪明，只加载一次相同的图像，无论你在 CSS 中调用它多少次。