zoukankan      html  css  js  c++  java
  • 前端试题-什么是css sprite?优缺点?

    CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,这样,在访问页面时,就只需请求一次就可以了,而不必一次次向服务器发送请求。

    它的原理就是把见面中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,”background-repeat”,”background-position”的组合进行背景定位,实现多个位置的背景,一张图来搞定。

    优点

    1 减少网页的http请求,提高页面性能

    2 减少图片字节

    3 解决比较头疼的命名问题,以前好多张一个个想名字,现在一个名字就搞定

    4 更换整个网页风格时更方便,更易维护

    缺点

    1 图片合并时,要把多张有序合理合并成一张,还要留好足够的空间,防止板块内出现不必要的背景,如果在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,很容易出现背景断裂

    2 拼合图片的时间成本加大,CSS Sprites在开发时,需要通过photoshop或其他工具测量计算每一个背景单元的精确位置

    3 编码和维护的时间成本会增加,CSS Sprites在维护时,如果页面背景有少许改动,一般就要改这张合并的图片,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。相对于一个可以轻松计算出来状态位置的简单按钮来说,大型的 sprite 会导致无尽地测试和图片状态的重新摆放。

    4 不是所有图片都是背景, 背景图片应该留给按钮以及用来装饰元素,而用来传达重要信息的图像应该内联在 XHTML 中。

    总之,CSS Sprite是很有用,但也不要一味滥用而超出一个度的限制,需明白过犹不及。

  • 相关阅读:
    java实现第三届蓝桥杯拼音字母
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    java实现第三届蓝桥杯数据压缩
    Jackson工具类(各种转换)
    Jackson转换JSON例子
    Jackson的用法实例分析
    SpringMVC 封装返回结果对象
  • 原文地址:https://www.cnblogs.com/sunshinegirl-7/p/5186223.html
Copyright © 2011-2022 走看看