css – 图像精灵背后的想法是什么,如何接近它?

前端之家收集整理的这篇文章主要介绍了css – 图像精灵背后的想法是什么,如何接近它?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你如何在css中使用图像精灵?

我应该将我网站上的所有图像合并到一个图像精灵中吗?这真的有益吗?

维护这些图像并在以后更改它们有多难?

解决方法

Should I take all the images in my website and combine them to one image sprite?

当然不是.你太过于字面意思了.

我发现精灵最适合用于类似图像的组.例子包括

>图形按钮的所有状态
>图标的状态
>背景的所有排列(除非需要平铺两种方式)

Is it really that beneficial?

如果你在繁忙的网站上有很多,非常.它为每个映像保存了一个请求,节省了用户时间,并为您的服务器节省了大量并发连接.

How hard is it to maintain those images and change them later on?

如果你在逻辑上使用它们,那很简单.如果您需要添加另一个导航项,则打开导航精灵并展开它.对于像导航这样的东西,它实际上可以更容易维护,因为您在同一文档中就像在您旁边进行比较一样.

编辑,看过one of the more extreme examples,我会补充一点,我永远不会走得那么远,因为:

>下载量为60k.不是很大,但在连接速度很慢的情况下,必须在任何显示之前下载60k.如果您的所有可视资产都被束缚,则可能会使加载时间变得更长.
>你的CSS成为背景位置命令的荒谬混合.如果你想进行更改,你必须回到精灵并测量一切.一次又一次.
>如果你需要在精灵的左上角放大一些东西,上帝就会怜悯你的灵魂.你可能只是在当前的sprite下添加一个新的sprite.
>这可能会导致臃肿.实际上,加载所有这些图像可能会加载一些用户永远不会真正看到的大量材料.加载未使用的数据可能比连接开销更糟糕(考虑多个廉价服务器或CDN可以轻松地提供静态内容)

其他例子更简单,更有价值(IMO).

猜你在找的CSS相关文章