爲了提高頁面的性能,瞭解了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的一個簡單實例,實際上應用非常廣泛!!!