為了提高頁面的性能，了解了CSS Sprites；
所謂CSS Sprites實際上就是對一張圖檔的重複使用，而這張圖檔中包含了許多的小圖檔，我們通過background-image印日大圖，利用background-position進行定位，選出該圖檔中你所需要的那一部分，再将其放在你所想放在的地方；
這麼做可以減少網頁的http請求以及圖檔的位元組數；進而提高頁面的性能；
核心為：
.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}
對于background-position的定位規則，我們可以檢視W3C文檔，實際上，左上就是（0px 0px），第一個值是水準方向，第二個值是垂直方向；那麼可知，右上就是（-apx 0px），其中a就是右上這個小圖檔離大圖左側的距離；以此類推；
執行個體代碼（實作一個響應式的導航欄）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<script src="jquery-1.8.2.min.js"></script>
<title>CSS Sprites簡單執行個體</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
ul{
list-style: none;
}
li{
display: block;
width: 25%;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
background-color: #ddd;
}
li:hover{
background-color: #eef;
}
li::after{
content: '';
display: block;
clear: both;
}
i{
position: relative;
left: 50%;
right: 50%;
margin-left: -13px;
display: block;
width: 25px;
height: 25px;
border: 1px solid white;
border-radius: 50%;
cursor: pointer;
}
.pic1,.pic2,.pic3,.pic4{background: url(https://img-blog.csdn.net/20160105223630762);}
.pic1{background-position: 0px 0px;}
.pic2{background-position: -25px 0px;}
.pic3{background-position: 0px -25px;}
.pic4{background-position: -25px -25px;}
span{
display: block;
width: 100%;
height: 20px;
line-height: 20px;
}
@media only screen and (max-width: 600px){
li{
width: 100%;
height: 50px;
}
}
</style>
</head>
<body>
<div>
<ul>
<li>
<i class="pic1"></i>
<span>house1</span>
</li>
<li>
<i class="pic2"></i>
<span>house2</span>
</li>
<li>
<i class="pic3"></i>
<span>house3</span>
</li>
<li>
<i class="pic4"></i>
<span>house4</span>
</li>
</ul>
</div>
</body>
</html>
效果圖如下所示：
還是用了一個媒體查詢，CSS3的屬性，即在螢幕寬度小于600px是，導航欄的每一項寬度變為100%；
如圖：
以上就是CSS Sprites的一個簡單執行個體，實際上應用非常廣泛！！！