图片的模糊样式以及图像拼合技术（雪碧图）

目录​​​​​​​

一、模糊样式：filter

二、图像拼合技术（雪碧图）

---

一、模糊样式：filter

二、图像拼合技术（雪碧图）

• 例如下面这张图片：

span{
   display: inline-block;
   width: 36px;
   height: 40px;
   background: url("./image/bg.png");
   /*border: 1px solid red;*/
 }
.s1{
   background-position: 0px -192px;
 }
.s2{
   background-position: -41px -192px;
}
.s3{
  background-position: -82px -192px;
}
.s4{
 background-position: -123px -192px;
}
 <span class="s1"></span>
 <span class="s2"></span>
 <span class="s3"></span>
 <span class="s4"></span>

• 经过图像拼合：