精灵图技术的使用.pptxVIP

CSS精灵图CSS精灵图CSS JING LING TU聚“小图”变“大图”；由“天涯海角”到“咫尺之间”本节导读1+X Web前端开发证书课程 一、精灵图技术的使用 又称为雪碧图，是一种网页图片应用处理方式，可以减轻服务器交互负担，提高页面加载速度。CSS精灵图（CSS Sprite） 利用图像软件将网站小背景图片整合到一张大图中，使用时再用CSS的属性定位来获得小图。核心原理 一、精灵图技术的使用在网页中查找CSS精灵图操作视频 “精灵字母”巧构建二、制作精灵图一起来制作一幅精灵图吧！ 二、制作精灵图CSS字母精灵图操作视频 二、制作精灵图background-position属性取值规律向左、向上移动取负向右、向下移动取正背景图像 三、核心要点1图片整合2移动位置3精确测量4移动距离主要针对背景图片：将多个小背景图片，整合到一张大图中移动背景图片位置，使用：background-position属性精确测量精灵图：每个小背景图片的大小和位置移动距离：即该目标图片的x和y轴坐标 。“精益求精”的工匠精神 世界技能大赛风采展示机遇挑战信息技术促进国家和社会发展大数据时代呼唤创新型人才 习近平总书记强调：“要健全技能人才培养、使用、评价、激励制度，大力发展技工教育，大规模开展职业技能培训，加快培养大批高素质劳动者和技术技能人才。要在