标签：网页 img 精灵 background position CSS

• 什么是精灵图
• 为什么需要精灵图
• 精灵图的使用

什么是精灵图

在网页中，往往会用到许多图像来修饰网页元素，将这些所需要的元素都放到一张图中，这就是精灵图。

为什么需要精灵图

如果网页中所使用的图修饰较多，那么就会导致网页频繁请求服务器，造成服务器压力过大，倒是页面的加载速度变慢。

为了有效降低服务器接收和发送请求的次数，提高页面加载速度，就出现了CSS的精灵图技术（也成为CSS Sprites、CSS雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

精灵图的使用

1. 给盒子设定一个大小。
2. 通过 background-position 参数一定精灵图的位置，以便于让需要显示的内容在盒子中显示。

.box {
    width: 30px;
    height: 30px;
    background: url(../img/img.png);
    background-position: -155px -105px;
}

• 复合写法：background: url(../img/img.png) -155px -105px;
• 分开写法：通过``background指定精灵图，通过background-position`指定位置
• 指定位置也可以拆分成background-position-x和background-position-y

标签：网页,img,精灵,background,position,CSS
来源： https://www.cnblogs.com/brokyz/p/16359060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。