使用带有IMG标签的精灵？

StackOverflow https://stackoverflow.com/questions/4335957

题

我了解如何使用Sprites，但是不是IMG标签所需的“ SRC”属性？我总是可以使用跨度或其他标签，并设置背景/宽度/等，但在语义上不会正确。

基本上，我想省略IMG标签的SRC并使用Sprites，但担心HTML因此在技术上不正确。谢谢。

有帮助吗？

解决方案

关于语义正确性：

当图像具有语义含义时， 因此，它被认为是满足的 使用IMG标签, ，没有精灵，并且正确设置了Alt。

当图像只是装饰时 就像盒子的背景，按钮的背景，菜单选项的背景等等一样，它没有语义含义，因此您只能 将其用作背景 来自CSS的跨度，div等。在这种情况下，您可以使用精灵。

其他提示

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

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方法都肯定都有自己的好处，因此您需要弄清楚哪种方法更适合您。

我为SRC使用1x1透明的GIF（所谓的垫片）。然后设置具有相应BG位置的IMG标签的背景图像。这样，您就可以利用精灵的速度并保持代码的语义（您仍然可以使用alt属性）

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

实际上，使用CSS设置跨度或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。

您可以使用CSS背景，或者 HTML画布 动态利用的元素。使用画布的，您有能力轻松地子集图像并执行 混合模式效果.

您可以通过重新考虑您的选择来解决此问题。

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

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

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

现在您的精灵基于IMG标签，因此您可以使用您的 alt 文本。

以下示例基于Facebook Sprite，彼此之间具有两个版本的图标，每个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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top