H5-33 CSS Sprite

标签：Sprite 33 image jpg background position CSS

CSS Sprite 也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

1、优点：

　　①减少图片字节

　　②减少网页的http请求，从而大大的提高页面的性能

2、原理：

　　①通过background-image引入背景图片

　　②通过background-position把背景图片移动到自己需要的位置

3、实列：

    <span class="a1"></span>     <span class="a2"></span> 　　         .a1{             display: block;             width: 45px;             height: 70px;             background-image: url(./1.jpg);             border: 1px solid red;             background-position:-92px -14px;         }         .a2{             display: block;             width: 45px;             height: 70px;             background-image: url(./1.jpg);             border: 1px solid red;             background-position:-257px -14px;         }

 

　　

标签：Sprite,33,image,jpg,background,position,CSS
From： https://www.cnblogs.com/zhangxiaoguo/p/18593800