62

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

基本上，我想省略 IMG 标记的 SRC，只使用精灵，但我担心 HTML 在技术上不是有效的，因为它。谢谢。

4

6 回答 6

61

使用 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 方法肯定各有好处，所以你需要弄清楚哪一种更适合你。

于 2011-06-29T13:06:00.233 回答
58

关于语义正确性：

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

当一个图像只是装饰的时候，比如一个盒子的背景，一个按钮的背景，一个菜单选项的背景等等，它没有语义意义，所以你可以把它当作SPAN，DIV等的背景.来自CSS。在这种情况下，您可以使用精灵。

于 2010-12-02T15:08:51.107 回答
7

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

于 2011-08-31T17:07:05.503 回答
5

我总是可以使用 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。

于 2010-12-02T14:26:19.287 回答
3

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

于 2010-12-02T14:36:01.457 回答
1

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

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

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

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

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

以下示例基于 Facebook 精灵，其中两个版本的图标相互叠加，每个 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>
于 2014-05-11T23:28:08.273 回答