html - 在 HTML 页面上使用 CSS Sprite

Question

我浏览了所有关于 CSS sprites 的 how-tos，虽然其中一些很有帮助，但绝对没有解释如何使用 CSS 类在 HTML 页面中显示图像。

这是我的 CSS 代码，它有两个类。

.sprites{background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;}
#3_png{height:16px;width:75px;background-position:0 0;}
#5_png{height:16px;width:75px;background-position:-75px 0;}
...and so on

我用什么代码来显示我想要的图像，不是作为链接，不是列表，不是背景，只是一个宽度为 75 高度为 16 的独立图像？我想我应该使用 DIV 并为其分配两个类，如下所示:class="sprites 3_png"但它不起作用。

更新: 代码有几个问题。第一个是 3_png 应该用作 id，而不是类。其次，该代码仅在使用命名约定 png_N 而不是 N_png 时有效，当它以数字开头时它将无效。找到可行的解决方案后，我遇到了另一个图像创建换行符的问题，使用 display:inline 解决了这个问题。这是生成所需输出的 ​​CSS 和 PHP 代码:

CSS:

.sprites {background-image:url('bookie_logos/0csssprites.png');background-color:transparent;background-repeat:no-repeat;display:inline;}
#png3  {height:16px;width:75px;background-position:0px 0;}
#png5  {height:16px;width:75px;background-position:-75px 0;}

PHP:

$classy = "png" . $db_field['bookieid'];
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='bookie' align='absmiddle'/>" , "</td>";

$classy 是一个变量，它在 spritesheet 中的 160 多张图像之间进行选择。 transparent.gif 是一个 1px 透明 gif，因为我选择使用 IMG 标签而不是 DIV，我需要使用那个 1px gif 才能让 IMG 标签实际显示 Sprite 图像。

我要感谢所有贡献者，你们中的大多数人都看到了问题的第一部分，应该使用 ID 而不是类。你们都引导我找到了解决方案，不幸的是我只能选择一个答案，我选择了提到 display:block 的那个，因为它让我稍后使用 display:inline。

谢谢大家，我希望这个问题和答案能帮助其他在 CSS Sprite 方面遇到同样问题的人。

Answer 1

你的错误是使用 3_png 作为一个类，它是一个 ID，也是 css grammar spec表示 id 和类必须以 - 、_ 或字母 a-z 开头，因此 3_png 无效，但 png_3 不是。

要使其正常工作，您应该使用:

 <div id="png_3" class="sprites"></div>

并更改您的 css 以反射(reflect)名称更改。