CSS Sprite技术,CSS背景或img的剪辑

前端之家收集整理的这篇文章主要介绍了CSS Sprite技术,CSS背景或img的剪辑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有两种图像精灵技术.
“经典”版本使用背景和背景位置CSS属性.
(如这里所述 http://www.alistapart.com/articles/sprites)

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

我的问题是,在“经典”版本中是否有优势使用“第二”版本?

谢谢和最好的,

解决方法

差异主要在于文档的语义:您仍然应该只使用背景的装饰和布局图形,并且只能使用图像标签作为页面内容的一部分.

记住,页面应该仍然是有用和可用的没有任何CSS:第二种技术,这将意味着你的整个精灵地图将是可见的(你不会得到任何剪辑)到处你使用一个精灵 – 非常混乱!

第一种技术不会显示任何精灵,但不会是错误或混淆.

当您考虑像图标这样的精灵技巧真的很有用的时候,图形是否是内容或装饰会变得有点棘手.就个人而言,我喜欢为图标使用背景图像,因为它们将信息添加到另一个元素(例如链接或按钮控件),而不是自己的元素.

简而言之,基于图像标签的精灵是一个破碎的技术 – 我不会使用它.

猜你在找的CSS相关文章