CSS精灵显示所有图像

Question

我正在尝试使用包含4个图像的1个单个图像文件，并使用CSS精灵显示它们。不知何故，显示所有4个图像。我指的是w3schools中的一个例子。

<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
  <img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
  <img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>

CSS:

#ViewTypeContainer img#calendarView {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') 0 0;
}

#ViewTypeContainer img#grdView  {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') -30px 0;
}

我的图片文件是.png格式：

有人能发现我的错误吗？感谢。

Answer 1

是的：您的img代码的src属性也指向了精灵图片。

如果您希望精灵图像显示CSS中指定的位置，则图像需要src属性中的透明图像。

此处使用您的图片的工作示例（我使用data-URI作为透明GIF）：

• http://jsfiddle.net/7Ns8L/

这是另一个使用可能更具语义的HTML（取决于这些控件实际执行的操作）的示例，即没有<img>标记：

• http://jsfiddle.net/7Ns8L/1/

Answer 2

完全。您正在为图像提供背景图像。因此，IMG标记在精灵顶部显示为正常大小。如果使用background-position css属性，则最简单的应用sprite的概念。您可能会遇到为IMG标记源生成透明.png的问题（我不推荐它），或者只是用div替换IMG标记并为div提供相同的ID和CSS。