css文件
.icon
{
background: url(icon.png) no-repeat; /*url爲png圖片的路徑*/
/*width和line-height分別對應每個小圖標的寬和高*/
width: 20px;
line-height: :20px;
display: inline-block;
}
.icon-small
{ /*png圖片左上角爲原點,往右往下均爲負值*/
background-position: -150px 0px;/*對應小圖標的座標*/
}
html文件
<!-- 聯想一下Bootstrap 字體圖標(Glyphicons)
<span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>
爲什麼一個頁面的或者多個頁面的背景圖片,都集成到一張圖片裏?
我們訪問網站的時候,會對服務器發出HTTP請求,網站打開的快慢,處理與頁面的大小圖片大小網速等多方面的因素外,還有個重要的因素就是HTTP 的請求數。HTTP的請求數越多,網站打開的速度當然就會越慢,對服務器發出一個HTTP請求,對頁面打開速度造成的延時大概是0.01秒,一個連接,一個圖片都會對發出一個請求,如果HTTP請求過多,就會造成頁面大量的延時,訪問速度自然就慢了。
如果把所有的背景圖,都集成到一個圖片裏,這樣就只會對服務器發出一個HTTP請求,請求數就會大量減少,延時就小了。然後採用CSS 的 background-image 和 background-position 屬性來實現所需的背景圖並定位,達到頁面所需要的表達效果。