CSS整个小精灵图像加载

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

我试过使用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标签上加载一次精灵图像？然后使用背景位置在相关位置显示单个图像？

请帮忙。

来源

2013-01-02 ganesh

你可以用html做一个jsfiddle吗？ – Max

请JSFiddle会很好。 –

我以前没有试过jsfiddle，但它看起来很有趣。不知道如何使用它，但使用Drupal。 – ganesh

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

来源

2013-01-02 03:31:49

感谢Voitkek的回应。我今晚会试一试，如果问题得到解决，我会告诉你。 – ganesh

我在精灵上尝试了一个图像，它似乎工作得很好。感谢Voitek。 :) – ganesh

CSS整个小精灵图像加载

回答

相关问题