美文网首页CSS
CSS精灵图的使用

CSS精灵图的使用

作者: 埼玉的头发 | 来源:发表于2020-07-13 17:33 被阅读0次

优点:使网页加载速度变快

用法:

1.给容器设置背景图片(精灵图)

2.测量精灵图中需要得到的小图片的大小,并将其设置为容器大小

3.测量出需要得到的小图片左上角的坐标(x,y)

3.将background-position属性设置为 -x -y

相关文章

  • css 如何使用精灵图?background属性介绍(代码实例)

    本章给大家介绍css 怎样使用精灵图?background属性介绍(代码实例),让大家可以了解css精灵图(雪碧图...

  • 饥人谷-任务9-2

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 css雪碧图又叫css精灵或css sprite,...

  • CSS精灵图/边框属性/内外边距/盒模型

    CSS精灵图 作用:CSS精灵图是一种图像合成技术,可以减少请求的次数,以及降低服务器处理压力。使用:需要配合背景...

  • CSS小技巧

    css精灵图 英文名:css sprites也可以叫做雪碧图、精灵图、css贴图定位、css图像拼合 原理和好处 ...

  • CSS精灵图

    什么是CSS精灵图? CSS精灵图是一种图像合成技术。 CSS精灵图作用: 可以减少请求的次数,降低服务器处理的压...

  • css精灵图

    一、什么是css精灵图?css精灵图是一种图像合成技术 二、css精灵图作用?可以减少请求的次数,以及可以降低服务...

  • CSS精灵图

    什么是CSS精灵图? CSS精灵图是一种图像合成技术 CSS精灵图作用 可以减少请求次数,以及降低服务器处理压力 ...

  • 任务9- CSS常见技巧

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 简介CSS Sprites(雪碧图|精灵图)是一种...

  • CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprite(雪碧图|精灵图)指该方法是将...

  • 每个前端工程师都应该懂的前端性能优化总结:

    采用css雪碧图(css sprite/css图片精灵)技术 采用css雪碧图(css sprite/css图片精...

网友评论

    本文标题:CSS精灵图的使用

    本文链接:https://www.haomeiwen.com/subject/arpfhktx.html