Html 使用带IMG标签的精灵？
我知道如何使用精灵，但是，IMG标签不需要“src”属性吗？我总是可以使用SPAN或其他标记并设置背景/宽度/等，但它在语义上不正确 基本上，我想省略IMG标记的SRC，而只使用sprite，但我担心HTML在技术上不有效，因为它。谢谢 我总是可以使用SPAN或其他标记并设置背景/宽度/等，但它在语义上不正确 实际上，使用CSS设置span或div的背景并没有错。从语法上来说，从图像中省略src实际上是不正确的，因为这是标记的全部要点。标准中没有规定必须将文本放在跨度内。从语法上讲，修改元素的背景是最“正确”的方法 以下是W3C上img标签的参考： 还有一点额外的阅读： 这些元素将内容定义为内联（SPAN）或块级（DIV），但不会对内容施加其他表示习惯用法。因此，作者可以将这些元素与样式表、lang属性等结合使用，以根据自己的需要和喜好定制HTMLHtml 使用带IMG标签的精灵？,html,css,css-sprites,html-validation,Html,Css,Css Sprites,Html Validation,我知道如何使用精灵，但是，IMG标签不需要“src”属性吗？我总是可以使用SPAN或其他标记并设置背景/宽度/等，但它在语义上不正确 基本上，我想省略IMG标记的SRC，而只使用sprite，但我担心HTML在技术上不有效，因为它。谢谢 我总是可以使用SPAN或其他标记并设置背景/宽度/等，但它在语义上不正确 实际上，使用CSS设置span或div的背景并没有错。从语法上来说，从图像中省略src实际上是不正确的，因为这是标记的全部要点。标准中没有规定必须将文本放在跨度内。从语法上讲，修改元素的背
您可以使用CSS背景或元素来动态绘制。使用canvas，您可以轻松地对图像进行子集划分和执行。关于语义正确性： 当图像具有语义含义时，因此它被视为内容，使用不带精灵的IMG标记和正确设置的ALT
当图像只是装饰时，就像框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，因此您可以将其用作CSS中SPAN、DIV等的背景。在这种情况下，您可以使用精灵。使用精灵并不一定意味着您需要在css背景中定义它们。你也可以使用IMG标签精灵，要做到这一点，你基本上需要修剪你的图像。有两篇文章很好地解释了这一技巧：
CSS和IMG方法都有各自的优点，因此您需要找出哪种方法更适合您。我使用1x1透明gif（所谓的间隔符）作为src。然后将该img标签的背景图像设置为相应的bg位置。通过这种方式，您可以利用精灵的速度并保持代码的语义（您仍然可以使用alt属性）您可以通过重新考虑您的选项来解决这个问题 使用
alt按钮或输入标记。@DiAlex参考，您可能会发现一些有趣的标记可供使用。我知道这是一个老问题，但我真的很想感谢您提供的这两篇文章，它们都很好，并且真的给了我想要的东西。谢谢你，我希望这个问题不会因为我而被打断。这两个链接似乎都死掉了。下面是这两个链接的两个存档快照：*奇怪的是，我没有在其他博客中看到这种解决方案。我测试了它，它工作了！我自己想出了解决办法。据我所知，这是处理和标记的唯一解决方案。我需要搜索引擎优化。它也适用于在同一个精灵上包含多个图标的较大精灵，只需使用css定位即可。还有一种方法可以让您获得良好的效果并保持图像语义，因为这个原因，我只是将我自己的站点从转换为图像精灵——不必为图像src使用transparent.png图像意味着更少的HTTP请求。谁说我迂腐…？我也是这样做的，但这是一个额外的图像，导致HTML请求；而HTML请求的数量正是我们通过使用精灵来尽量减少的。这就是为什么我不想在图像中有一个“间隔符”。@DavideAndrea：为了避免HTTP请求，可以为图像使用一个数据URI；看见
<!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>