2021-01-05

解释下 CSS sprites 原理，优缺点 原理：a. CSS Sprites 其 实就 是把 网 页中 一些 背景 图 片整 合到 一 张图 片文 件 中，再 利用 CSS 的 “background-image” ， “background- repeat” ， “background-position” 的 组 合 进 行 背 景 定 位 ， background-position 可以用数字精确的定位出背景图片的位置。 优点：b. 减少网页的 http 请求 c. 减少图片的字节 d. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每 一个小元素进行命名 e. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改 变缺点：f. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂 g. CSS Sprites 在开发的时候，要通过 photoshop 或其他工具测量计算每一个背景单元的精确位置 h. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片