css - CSS Sprite 技术、css 背景或 img 的剪辑

Question

有两种图像精灵技术。“经典”版本使用背景和背景位置 css 属性。（正如这里描述的那样http://www.alistapart.com/articles/sprites）

“第二个”版本使用图像标签及其剪辑 css 属性。( http://css-tricks.com/css-sprites-with-inline-images/ )

我的问题是使用“第二”版本比“经典”版本有优势吗？

谢谢，最好的，维克多

Answer 1

区别主要在于文档的语义：您仍应仅将背景用于装饰和布局图形，而仅将图像标签用于作为页面内容一部分的图形。

请记住，页面应该在没有任何 CSS 的情况下仍然有用和可用：使用第二种技术，这意味着您的整个 sprite-map 在您使用 sprite 的任何地方都是可见的（您不会得到任何剪辑） - 非常混乱！

第一种技术不会显示任何精灵，但也不会出错或令人困惑。

当您考虑图标之类的东西时，图形是内容还是装饰变得有点棘手 - 其中精灵技术非常有用。就个人而言，我更喜欢为图标使用背景图像，因为它们将信息添加到另一个元素（例如链接或按钮控件），而不是元素本身。

简而言之——基于图像标签的精灵有点破烂——我不会使用它。

Answer 2

当您要打印带有图标的页面时，有一个用例（例如带有电话/Skype/等的组织联系人卡片）。所以你有两个选择：

- 使用单独的 img 元素
 - 通过具有“内容”和“剪辑”属性的伪（：之后）元素使用精灵

Answer 3

记住在使用第二种方法（剪辑）时也要在 img 标签中指定尺寸，这样即使禁用 CSS 也不会显示整个精灵。该方法的一个优点是，即使在 Windows 中启用了高对比度主题时，也可以使用剪辑显示图像，而背景图像则不是这样。

查看这两篇文章以获取更多信息：

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

通过具有 'content' 和 'clip' 属性的伪（：after）元素使用精灵

我不会推荐这种方法。如果您只想显示少量图像，这可能不是问题，但如果将其应用于数百个元素（CSS 伪元素通常对性能不利），尤其是在速度较慢的机器（智能手机等）上，它会非常慢。 ) 或较旧的浏览器，如 IE8。