使用带有 IMG 标签的精灵？答案

【问题标题】：Using sprites with IMG tag?使用带有 IMG 标签的精灵？
【发布时间】：2011-05-19 04:03:09
【问题描述】：

我了解如何使用精灵，但是，IMG 标签不需要“src”属性吗？我总是可以使用 SPAN 或其他标签并设置背景/宽度/等，但它在语义上是不正确的。

基本上，我想省略 IMG 标记的 SRC 并只使用精灵，但我担心 HTML 在技术上因此无效。谢谢。

【问题讨论】：

标签： html css css-sprites html-validation

【解决方案1】：

使用 sprite 并不一定意味着您需要在 css 背景中定义它们。你也可以使用 IMG 标签精灵，这样做你基本上需要修剪你的图像。有两篇很好的文章解释了这种技术：

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

CSS 和 IMG 方法肯定各有好处，所以你需要弄清楚哪一种更适合你。

【讨论】：

我知道这是一个老问题，但我真的很想感谢你的这两篇文章，这两篇文章都很棒，真的给了我想要的东西。谢谢你，我希望这个问题不会因为我而受到影响。
两个链接似乎都失效了
这里有两个存档快照：* web.archive.org/web/20170212063839/http://www.cssmojo.com/… * web.archive.org/web/20130726060548/http://www.artzstudio.com/…

【解决方案2】：

关于语义正确性：

当图像具有语义意义时，因此被认为是内容，使用 IMG 标记，不使用 sprite，并正确设置 ALT。

当图像只是装饰时，像框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，所以你可以将其用作 CSS 中 SPAN、DIV 等的背景。在这种情况下，您可以使用精灵。

【讨论】：

是否可以在 img 标签中使用精灵？这样我们就可以拥有精灵的速度和alt 属性。我有很多小按钮，所以它们不是装饰性的（必须使用 img？），而是浪费太多时间单独加载（必须使用 sprite？）。真是两难境地！
@DiAlex 如果您有小按钮，请使用带有背景图像的button 或input 标签。
@DiAlex 参考HTML5 spec，你可能会发现一些有趣的标签可以使用。

【解决方案3】：

我为 src 使用 1x1 透明 gif（所谓的间隔）。然后用相应的 bg 位置为那个 img 标签设置背景图像。这样您就可以利用精灵的速度并保持代码的语义（您仍然可以使用 alt 属性）

【讨论】：

出于这个原因，我只是将自己的网站从转换为
图像精灵 - 不必为图像 src 使用 transparent.png 图像意味着更少的 HTTP 请求。谁说我迂腐……？
我也是这样做的，但这是导致 HTML 请求的额外图像； HTML 请求的数量正是我们试图通过使用精灵来最小化的。这就是为什么我不想在图像中有“间隔”。
@DavideAndrea：为避免 HTTP 请求，您可以为图像使用数据 URI；见*.com/a/13139830。

【解决方案4】：

我总是可以使用 SPAN 或其他标签并设置背景/宽度/等，但它在语义上不正确

其实用 CSS 设置 span 或 div 的背景并没有错。从图像中省略 src 实际上在语法上是不正确的，因为这是标签的全部意义。标准中没有任何内容说您必须将文本放在跨度内。从语法上讲，修改元素的背景将是最“正确”的方式。

这是 W3C 上有关 img 标签的参考：http://www.w3.org/TR/html401/struct/objects.html#h-13.2

还有一点额外阅读：http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容强加其他表现形式。因此，作者可以将这些元素与样式表、语言属性等结合使用，以根据自己的需要和品味来定制 HTML。

【讨论】：

【解决方案5】：

您可以使用 CSS 背景或 HTML Canvas 元素来动态绘制。使用画布，您可以轻松地对图像进行子集化并执行blend mode effects。

【讨论】：

【解决方案6】：

你可以通过重新考虑你的选择来解决这个问题。

您使用<a> 和display:block; 或<div> 创建一个定义区域，并使用overflow hidden; 隐藏溢出和position:relative;。

然后，您将 <img> 图像精灵放置在绝对定位的内部，这是可能的，因为您定位了父对象。

然后在图片上使用:hover改变位置。

现在你的精灵是基于一个 img 标签的，所以你可以使用你的 alt 文本。

以下示例基于 Facebook sprite，其中两个版本的图标相互叠加，每个版本为 50 像素 x 50 像素，图像总高度为 100 像素：

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>

【讨论】：

奇怪的是，我在其他博客中没有看到这种解决方案。我测试了它，它有效！
我自己想出了解决方案。据我所知，它是唯一使用和标签的解决方案。我需要它来进行 SEO。它也适用于在同一个精灵上包含多个图标的更大精灵，只需使用 css 定位它。
嗯，还有this other, highly cross browser solution 可以实现良好的结果并保持图像语义，即使设置可能需要更长的时间。