使用IMG标签与精灵图？

Question

使用IMG标签与精灵图？

htmlcsscss-sprites

62

我明白如何使用精灵图，但是，IMG标签不是需要一个"src"属性吗？我可以使用SPAN或其他标签，并设置背景/宽度等，但这样不符合语义正确性。

基本上，我想省略IMG标签的SRC，只使用精灵图，但担心由于这个原因HTML不符合技术规范。

- Ryan Peters

6个回答

58

关于语义正确性：

当一张图片具有语义意义时，被视为内容，请使用IMG标签，不要使用雪碧图，并且正确设置ALT属性。

当一张图片只是装饰用途，例如方框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，所以您可以将其作为SPAN、DIV等元素的背景从CSS中使用。在这种情况下，您可以使用雪碧图。

- kapa

2

能否在img标签中使用精灵图呢？这样我们就可以同时拥有精灵图的速度和alt属性。我有很多小按钮，所以它们不是装饰性的（必须使用img标签？），但是单独加载太耗时间了（必须使用精灵图？）。真是一个两难的选择！ - dialex

5

如果您有小按钮，可以使用带有背景图像的 button 或 input 标签。 - kapa

3

请参考 HTML5 规范，你可以找到一些有趣的标签来使用。 - kapa

7

我使用一个1x1像素的透明gif作为src。然后，为该img标签设置相应的背景图像和背景位置。这样，您就可以利用雪碧图的速度，并保持代码的语义（您仍然可以使用alt属性）。

- Faisal Debouni

我只是将自己的网站从使用<img>标签转换为使用<div>标签的图像精灵，这样做的原因是 - 不需要使用透明.png图像作为图像src，从而减少HTTP请求。谁说我过于追求完美了？ - Richard

我也是这样做的，但那是一个额外的图像，会导致HTML请求的增加；而我们正试图通过使用精灵来尽量减少HTML请求的数量。这就是为什么我不想在图像中有一个“spacer”的原因。 - Davide Andrea

@DavideAndrea：为了避免HTTP请求，你可以使用数据URI来代替图片；请参阅https://dev59.com/zm025IYBdhLWcg3wZ1Rz#13139830。 - wchargin

5

我可以一直使用SPAN标签或其他标签，并设置背景/宽度等，但这样不会语义正确。

实际上，使用CSS来设置SPAN或DIV的背景没有任何问题。省略图像中的src是语法上不正确的，因为那就是该标记的全部意义所在。标准中没有规定您必须将文本放在span内部。从语法角度来说，在元素上修改背景将是最“正确”的方法。

这里是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）内容，但不会对内容施加任何其他呈现习惯用法。因此，作者可以结合样式表、lang属性等使用这些元素，以满足自己的需求和口味。

- Richard Key

3

你可以使用CSS背景或HTML画布元素进行动态绘制。使用画布，您可以轻松地对图像进行子集处理并执行混合模式效果。

- Phrogz

1

通过重新思考您的选项来解决这个问题。

您可以创建一个包含 <a> 且具有 display:block; 或 <div> 属性的定义区域，并使用 overflow hidden; 隐藏溢出部分和 position:relative; 属性。然后将您的 <img> 图像精灵放置在绝对定位内，这是因为您已经定位了父元素。

接下来，使用 :hover 在图像上更改位置。现在，您的精灵基于 img 标签，所以您可以使用 alt 文本。

以下示例基于 Facebook 精灵图，其中两个版本的图标彼此叠放，每个图标大小为 50px x 50px，总高度为 100px：

<!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>

- Paul

很奇怪，我在其他博客中没有看到过这种解决方案。我进行了测试，它是有效的！ - Dario Fumagalli

我自己想出了解决方案。据我所知，这是唯一适用于 <a> 和 <img> 标签的解决方案。我需要它来进行 SEO 优化。它还可以与包含多个图标的大型雪碧图一起使用，并通过 CSS 定位。 - Paul

嗯，还有另外一种高度兼容多浏览器的解决方案，可以实现良好的效果并保持图像语义，即使设置时间可能会更长。这是链接。 - Dario Fumagalli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wdev · Accepted Answer

使用精灵图并不一定意味着您需要在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方法都各自有其优点，因此您需要确定哪种更适合您。