CSS Sprite技术，css background或img的剪辑 [英] CSS Sprite techniques, css background or img's clip

问题描述

有两个图像精灵技术。
classic版本使用background和background-position css属性。
（如此处所述 http://www.alistapart.com/articles/sprites）

第二个版本使用图像标记及其剪辑css属性。
（ http://css-tricks.com/css- sprites-with-inline-images / ）

我的问题是，在经典版本上使用第二版本有什么优势？ / p>

感谢和最好，
Viktor

解决方案

主要是文档的语义：你应该仍然只使用装饰和布局图形的背景，并且只使用图像标签作为页面内容的一部分的图形。

请记住，页面应该仍然有用和没有任何CSS：第二种技术，这将意味着你的整个精灵地图将是可见的（你不会得到任何剪辑）到处使用sprite - 非常混淆！

第一种方法不会显示任何精灵，但不会错误或混淆。

无论图形是内容还是装饰都有点棘手，当你考虑像图标 - 哪里sprite技术是非常有用的。就个人而言，我喜欢使用背景图片作为图标，因为他们向另一个元素（例如链接或按钮控件）添加信息，而不是自己的元素。

总之，基于图像标记的sprite是一个破碎的技术 - 我不会使用它。

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

解决方案

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.

这篇关于CSS Sprite技术，css background或img的剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！