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标签页面上加载精灵图像吗？然后使用background-position在相关位置显示单个图像？

请帮忙。

Answer 1

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