CSS Sprites 和图像映射

Question

我正在尝试将 CSS Sprited css 类嵌入到图像映射中。最初，我创建了一个加载 8 张图片的 HTML 图像映射：

带有 7 个按钮的方形图像 = 未悬停时全为灰色。 7 张方形图片，每张图片都有一个带有颜色的按钮，用于悬停。

这会导致图像加载问题，因为直到有人将鼠标悬停在图像上才会加载图像，从而导致用户悬停图像出现短暂延迟。

我正在检查 CSS Sprites，发现这是实现所有所需按钮的快速加载时间的最有效方法。

所以...我已经创建了我的 CSS Sprite，但是图像映射似乎只允许我调用图像文件，而不是为 sprite 创建的类。我将如何合并这两种技术以允许我将鼠标悬停在每个按钮上并根据 CSS Sprite 定位激活它们各自的颜色。

对不起，如果这听起来太罗嗦或太混乱。很长一段时间以来，我一直在努力解决这个问题。

我是否应该放弃在带有定位的图像映射中使用 1 张图像的想法，而去加载 7 张 CSS Sprited 图像？

Answer 1

所以您正在尝试获取 CSS 精灵 - 背景位置可调的背景图像 - 使用 html <map> <area> 元素？棘手但可能。

DEMO on jsbin

已在 Firefox、Chrome、Opera 和 Safari（2013 年 8 月）以及 Internet Explorer 7、8、9 和 10 中进行了测试。

---

您基本上只需要一个<img> 和一个不可见但有效 src 属性不会导致浏览器显示其“损坏的图像”图标。

我的首选方式是这样，1px x 1px 透明 gif，base64 编码，因此不需要实际的 .gif 文件：

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIC‌​RAEAOw=="

"What's the valid way to include an image with no src?" 上还有一些其他建议的方法，但我尝试过的所有其他方法至少有一个问题。这很好用。

那就是普通的东西：

• 固定高度和宽度，最好通过 css
• 设置了背景位置的背景图像，就像在普通精灵图像中一样。
• usemap 属性就像制作图像映射时一样正常（如果你想要旧的 IE 支持，就像 usemap="#someArea" 和 # - 正常）。
• 普通<map>元素，id对应img的usemap，包含<area>元素

---

如果您的目标是在同一个精灵表上拥有来自不同位置的多个关联区域的图像，您可能会遇到这个问题：Overlapping images w/ image maps obstructing each other。那里建议的简单解决方案适用于图像映射：将您的<map> 分配给上面的一个完全透明但没有背景图像的图像，将其保持在所有其他图像之上，然后将图像作为常规图像精灵放在下面。

Answer 2

您需要使用 css hover 修饰符：

Somebutton {
  /* things needed to display the sprite */
  ...
  background-position: 0px -7px /* normal mode */
}

Somebutton:hover {
  /* things needed to display the sprite */
  ...
  background-position: 0px -56px /* shift the image
      49 pixels to the left to display color image. */
}