使用IMG标签的精灵？
我明白如何使用精灵，但是，不是IMG标签所需的“src”属性？ 我总是可以使用SPAN或其他标签，并设置背景/宽度/等，但它不会在语义上是正确的。
基本上，我想省略一个IMG标签的SRC，只使用精灵，但我担心HTML在技术上是不正确的，因为它。 谢谢。
关于语义正确性：
当一个图像具有语义意义，所以它被认为是内容， 使用一个IMG标签 ，没有精灵，并正确设置ALT。
当一个图像只是装饰，就像一个盒子的背景，一个button的背景，一个菜单选项的背景等，它没有语义上的含义，所以你可以用它作为 SPAN，DIV等的背景从CSS。 在这种情况下你可以使用精灵。
使用精灵并不一定意味着你需要在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方法都有自己的好处，所以你需要弄清楚哪一个更适合你。
我使用1×1透明GIF（所谓的间隔）为src。 然后为相应的bg位置设置该img标签的背景图像。 这样你就可以利用精灵的速度并保持你的代码的语义（你仍然可以使用alt属性）
我总是可以使用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。
您可以使用CSS背景或HTML Canvas元素来dynamic绘制。 使用canvas，您可以轻松地对图像进行子集合并执行混合模式效果 。
你通过重新思考你的select来解决这个问题。
您可以使用<a>和display:block;创build一个定义的区域display:block; 或<div>并使用overflow hidden; 隐藏溢出和position:relative; 。
然后你把你的<img>图像精灵放在绝对的位置，这是可能的，因为你定位的父母。
然后使用:hover在图像: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>
