2

我正在尝试使用 1 个包含 4 个图像的单个图像文件并使用 CSS sprite 显示它们。不知何故，所有 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 格式：

在此处输入图像描述

谁能发现我的错误？谢谢。

4

2 回答 2

2

是的：您的img标签也具有src指向精灵图像的属性。

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

在此处使用您的图像的工作示例（我使用了透明 GIF的数据 URI ）：

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

于 2013-03-25T15:55:58.783 回答
1

确切地。您正在为图像提供背景图像。因此，IMG 标签在精灵顶部显示为正常大小。如果您使用背景位置 css 属性，则最容易应用精灵的概念。您可以通过为您的 IMG 标签源生成透明 .png 的麻烦（我不推荐它），或者只是将 IMG 标签替换为 div 并为 div 提供相同的 ID 和 CSS。

于 2013-03-25T16:09:39.647 回答