精灵图:一个网页当中往往会应用很多的小的背景图片作为装饰,当网页图片过多时,服务器会频繁接收和发送请求图片,会造成服务器压力过大,这样会将低页面加载速度,
因此为了有效减少服务器接收和请求的次数,提高页面的加载速度,就出现了css精灵技术
background-image: url(1.png);
background-position:6px 225px ;(background-position:x y; 调整位置)
background:url()no-repeat x y;
核心原理:将网页中的一些小的背景图整合到一张大图上,这样服务器只需要请求一次就可以了
1.精灵技术主要是针对背景图使用,把多个小图整合到一张大图上
2.精灵图也称为雪碧图
3.通过移动背景图位置来实现 background-position
主要通过 x y 移动位置 网页往右是正值 往下是正值
精灵图的用法
最新推荐文章于 2024-08-03 09:05:49 发布