用于动态检索图像的CSS Sprites

Question

我为一些帖子显示了一些缩略图 - 这些可能是最新的，最受欢迎的等等。我想默认显示黑白缩略图，并在鼠标悬停时将它们着色。 / p>

似乎最好的方法是使用精灵 - 一个包含黑白和彩色版本的图像然后只需切换它们的位置。像http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

这样的东西

然而问题是我不知道我将显示多少缩略图，也不知道究竟是哪些缩略图 - 这是由php代码动态生成的。

我想在.css文件中创建一个主要的CSS样式，然后只为HTML中的每个缩略图动态生成URL。我对CSS不是很好，所以我会试着给出一个简单的例子：

<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#thumb{left:0px;width:46px;}
#thumb{background:url('USE FROM HTML') 0 0;}
#thumb a:hover{background: url('USE FROM HTML') 0 -45px;}
</style>

HTML：

<div id="navlist">
<div id="thumb" URL="URL FOR IMAGE"></div>
</div>

我不需要为每个拇指设置大小，因为它们的大小和位置都相同，所以这可以留在主CSS中，我只需要为HTML中的每个拇指设置URL 。我有一堆拇指所以为每个人做一个完整的风格设置似乎是浪费空间。

提前致谢！