CSS Sprite 技术、CSS 背景或 img 剪辑
有两种图像精灵技术。 “经典”版本使用background 和background-position css 属性。 （正如此处所述http://www.alistapart.com/articles/sprites）
“第二个版本使用图像标签及其剪辑 CSS 属性。 ( http://css-tricks.com/css-sprites-with-inline -images/）
我的问题是使用“第二”版本比“经典”版本有优势吗？
谢谢，最好的， 维克多
There are two image sprite techniques.
The "classic" version uses the background and the background-position css properties.
(as it's described here http://www.alistapart.com/articles/sprites)
The "second" version uses an image tag and its clip css property.
( http://css-tricks.com/css-sprites-with-inline-images/)
My question is that are there advantages of using the "second" version over the "classic" version?
thanks and best,
Viktor
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
差异主要在于文档的语义：您仍然应该仅将背景用于装饰和布局图形，并且仅将图像标签用于属于页面内容一部分的图形。
请记住，页面应该在没有任何 CSS 的情况下仍然有用和可用：使用第二种技术，这意味着您的整个 sprite-map 在您使用 sprite 的任何地方都是可见的（您不会得到任何剪辑） - 非常混乱！
第一种技术不会显示任何精灵，但也不会错误或令人困惑。
当你考虑像图标这样的东西时，图形是内容还是装饰就变得有点棘手——精灵技术在图标中非常有用。就我个人而言，我更喜欢使用图标的背景图像，因为它们将信息添加到另一个元素（例如链接或按钮控件），而不是本身的元素。
简而言之 - 基于图像标签的精灵是一种有点破损的技术 - 我不会使用它。
The difference comes mainly down to the semantics of the document: You should still only use backgrounds for decorative and layout graphics, and only use image tags for graphics that are part of the content of your page.
Remember that pages should still be useful and usable without any CSS: with the second technique, this would mean that your whole sprite-map would be visible (you wouldn't get any clipping) everywhere you used a sprite - very confusing!
The first technique wouldn't show any sprites, but wouldn't be wrong or confusing either.
Whether a graphic is content or decoration gets a bit tricky when you consider things like icons - where sprite techniques are really useful. Personally, I prefer to use background images for icons, as they are adding information to another element (say a link or button control), not elements in their own right.
In short - the image tag based sprites is a bit of a broken technique - I wouldn't use it.
当您想要打印带有图标的页面（例如带有电话/Skype/等的组织联系人卡片）时，有一个用例。所以你有两个选择：
There is a use case when you want to print a page with icons on it (for example an organization contacts card with phone/skype/etc). So you have two options:
使用第二种方法（clip）时，请记住在 img 标签中指定尺寸，这样即使禁用 CSS 也不会显示整个精灵。该方法的优点之一是，即使在 Windows 中启用了高对比度主题，使用剪辑也会显示图像，而背景图像则不然。
查看这两篇文章以获取更多信息：
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-精灵高对比度/
我不推荐这种方法。如果您只想显示少量图像，这可能不是问题，但如果将其应用于数百个元素，则速度非常慢（CSS 伪元素通常对性能不利），尤其是在速度较慢的机器（智能手机等）上。 ）或较旧的浏览器（如 IE8）。
Remember to specify dimensions in the img tag too when using the second method (clip) so that the whole sprite won't be displayed even when CSS is disabled. One advantage of that method is that with clip the images are displayed even when high contrast themes are enabled in Windows, which is not the case with background images.
Check this two articles for more information:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
I wouldn't recommend this method. It may not be a problem if you just want to display a small number images, but it's extremely slow if you apply it to hundreds of elements (CSS pseudo elements are bad for performance in general), especially on slower machines (smartphones, etc.) or older browsers like IE8.