使用带有IMG标签的精灵？

Question

我知道如何使用精灵,但是,IMG标签不是"src"属性吗？我总是可以使用SPAN或其他标签并设置背景/宽度/等,但它在语义上是不正确的.

基本上,我想省略SRC的IMG标签并仅使用精灵,但我担心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.

当图像只是装饰时,如框的背景,按钮的背景,菜单选项的背景等,它没有语义含义,因此您可以将它用作 SPAN,DIV等的背景来自CSS.在这种情况下,您可以使用精灵.

Answer 3

我为src使用1x1透明gif(所谓的spacer).然后使用相应的bg位置设置该img标签的背景图像.这样你就可以利用sprite的速度并保持代码的语义(你仍然可以使用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.