Question

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

基本上，我想省略用于IMG标签的SRC并仅使用精灵，但我担心HTML因技术原因无效。感谢。

Answer 1

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

Answer 2

关于语义正确性：

当图片具有语义含义时所以它被认为是内容，使用IMG标记，没有精灵，并且正确设置了ALT。

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

Answer 3

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

Answer 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），但不对内容强加其他表述习语。因此，作者可以将这些元素与样式表，lang属性等结合使用，以根据自己的需要和品味定制HTML。

Answer 5

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

Answer 6

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

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

然后将<img>图像精灵置于绝对定位的位置，这可能是因为您定位了父级。

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

现在您的精灵基于img标记，因此您可以使用alt文字。

以下示例基于Facebook精灵，其中两个版本的图标相互叠加，每个50px乘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>

使用带有IMG标签的精灵？

6 个答案: