css sprites精靈圖、css圖片整合、css貼圖定位案例教程

時間 2019-11-30

標籤 css sprites 精靈圖片整合定位案例教程欄目 CSS 简体版

原文原文鏈接

1、 什麼是css sprites css

CSS Sprites一般被稱爲css精靈圖，在國內也被意譯爲css圖片整合和css貼圖定位，也有人稱他爲雪碧圖。就是將導航的背景圖，按鈕的背景圖等有規則的合併成一張背景圖，即多張圖合併爲一張整圖，而後再利用background-position進行背景圖定位的一種技術。html

2、爲何須要css sprites bash

CSS Sprites 並非一門新的技術了，目前他發展的已經比較成熟，阿里巴巴、百度、谷歌等各公司的網頁中處處均可以發現CSS Sprites 的影子。他是網頁裏常見的一種圖片應用處理方式，他容許你將一個頁面裏所涉及到的所=有的零星的圖片都整合到一張大圖中去，這樣一來，當訪問這個頁面時，所加載的圖片就不會像之前那樣一張一張的慢慢顯示出來了，對於當前的網絡所流行的速度來講，不超出200kb的單張圖片所須要的加載時間基本是差很少的，節省加載速度的關鍵不是下降重量，而是減小個數，就由於計算機都是按照byte計算。頁面每顯示一張圖片都會向服務器發送一次請求。因此，圖片越多，所請求的次數就越多。爲了減小HTTP的請求次數，不少網站的導航背景圖、登陸框、按鈕背景圖等並不使用服務器

不少網站的導航欄圖標、登陸框圖片等，使用的並非<img>標籤，而是CSS Sprite。本課程分析了CSS Sprite的實現原理，詳細講解制做方法，實現完整效果，讓你快速掌握CSS Sprite技術。網絡

3、CSS Sprites的優點工具

在不少狀況下，它有着必定的優點，最重要的是它能夠減輕服務器的負擔，提升網頁的加載速度。佈局

由於假咱們如今有9張小圖片，（例1）那麼就會就有9個HTTP請求，可是若是把這九張小圖放在一張大圖裏，那就只須要請求1次，由於你要的9個小圖都在一張大圖裏了，請求一次後不用再次發送HTTP請求去請求圖片資源。性能

例1.學習

當頁面加載時，不是去加載每個單獨的圖片，而是一次加載整個組合圖片。它大大減小了HTTP請求的次數，減輕服務器的壓力，同時也縮短了懸停時候加載圖片所須要的時間延遲，使效果更流暢。網站

隨着頁面設計向着精緻、巧妙的方向發展，便開始考慮用非Js的方法制做鼠標滑過、懸停菜單的效果，這時精靈圖應運而生。

先看效果：

首先，是在正常模式下瀏覽：

而後，是在鼠標懸停的時候瀏覽：

最後，是在鼠標點擊連接的時候瀏覽：

這樣過渡的很是天然。具體用到的圖片以下：

其實，剛纔的鼠標懸停和點擊連接的圖片切換，就是經過位置控制取自bg2_btn.jpg，下面是具體實現方法：

首先是html頁面源代碼：

代碼以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>nav</title> 
<link href="mydemo.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div> 
    <img src="image/logo/logo2.jpg" alt="wenqi's blog" /> 
</div> 
<!------- 導航2 -------> 
<div class="menu2"> 
    <div class="left2"></div> 
    <div class="center2"> 
        <a href="#">Blog</a> 
        <a href="#">Themes</a> 
        <a href="#">Service</a> 
        <a href="#">About</a> 
        <a href="#">Help</a>  
    </div> 
    <div class="right2"></div> 
    <div class="clear"></div> 
</div> 
</body> 
</html> 

其次就是css的代碼： 

代碼以下:

html 
{ 
width:100%; 
height:100%; 
} 
body 
{ 
background-color:#fff; 
font-size:18px; 
font-family:"Arial","Tahoma","微軟雅黑","雅黑"; 
line-height:18px; 
padding:0px; 
margin:0px; 
text-align:center; 
} 
/* www.codefans.net */ 
a 
{ 
display:block; 
float:left; 
} 
del,div.clear 
{ 
height:0px; 
font-size:0px; 
line-height:0px; 
padding:0px; 
margin:0px; 
display:block; 
clear:both; 
overflow:hidden; 
} 
div 
{ 
width:550px; 
text-align:left; 
margin:auto auto auto auto; 
} 
.menu2 
{ 
font-size:14px; 
line-height:14px; 
margin-bottom:24px; 
} 
.menu2 .left2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_left.jpg") no-repeat left top; 
float:left; 
} 
.menu2 .center2 
{ 
width:540px; 
height:47px; 
background:url("image/navigation/bg2_center.jpg") repeat-x left top; 
float:left; 
} 
.menu2 .right2 
{ 
width:5px; 
height:47px; 
background:url("image/navigation/bg2_right.jpg") no-repeat left top; 
float:left; 
} 
.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
} 
.menu2 a:hover 
{ 
color:#fff; 
background-position:left 0px; 
} 
.menu2 a:active 
{ 
color:#fff; 
background-position:left -47px; 
} 
複製代碼

其實主要的是這一段：

代碼以下:

.menu2 a:link,.menu2 a:visited 
{ 
color:#585858; 
width:77px; 
height:30px; 
padding-top:17px; 
background:url("image/navigation/bg2_btn.jpg") no-repeat left -94px; 
text-align:center; 
text-decoration:none; 
} 
複製代碼

利用了圖片整合圖，將圖片通過準確的切割，並且使用background-position來控制，就能夠作到js的控制效果。

要作出這種效果還要學習怎樣把小圖排版成大圖，以便於更容易去測量位置，且不會互相影響。

例2.

谷歌：

土豆：

淘寶：

其中小圖之間的排版是有些點規律的，好比說淘寶這張，相似的小圖都放置成同一列，這樣就計算小圖顯示位置的時候，只須要知道第一個小圖標的位置就能夠了，同一列的小圖， X座標同樣，只須要改Y座標的位置。這樣就方便了許多。用到的css屬性是background-image、background-position、background-repeat、這幾個屬性。或者使用background這個複合屬性寫在一塊兒就好。

利用CSS Sprites能很好地減小了網頁的http請求，從而大大的提升了頁面的性能，這是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；我的認爲CSS Sprites能減小圖片的字節，我曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

4、css sprites實例示例教程

一、素材與要實現的效果

二、sprites實例教程解釋介紹

首先這些素材圖標都是用ps放在同一張圖片上，而後實現成列表類佈局。使用css sprites實現此佈局而後使用background樣式進行實現。

此導航的佈局咱們使用ul 無序列表進行佈局，每一個li站一行排版，對ul設置padding實現四周內容與邊框必定間距效果，由於每一個li前面圖標不一樣，但此背景圖片是拼合在一張圖片上，因此這裏作li裏開始使用SPAN標籤實現不一樣圖標的效果，每一個列表項的圖標不相同爲了區別因此對span設置不一樣class名，不一樣class對應設置定位相應的圖標。

三、實例教程準備 1）、圖標素材，這裏直接爲你們提供拼接好的圖標素材圖片一張，命名爲「bg.png」，以下圖，可直接另存爲保存使用。

四、先寫佈局，再css sprites設置不一樣背景圖標樣式

html代碼：

<ul class="Sprite"> 
    <li><span class="a1"></span><a href="#">個人主頁</a></li> 
    <li><span class="a2"></span><a href="#">新聞頭條</a></li> 
    <li><span class="a3"></span><a href="#">電視劇</a></li> 
    <li><span class="a4"></span><a href="#">最新電影</a></li> 
    <li><span class="a5"></span><a href="#">小說大全</a></li> 
    <li><span class="a6"></span><a href="#">旅遊度假</a></li> 

</ul> 
複製代碼

爲了區別不一樣效果，對不一樣的span標籤加入不一樣的class名稱。

css代碼：

ul { margin:0 auto;border:1px solid #F00;width:300px; padding:10px;} 
ul li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden; float:left;} 
ul li span{ float:left; width:17px;padding-top:5px;height:17px;  
overflow:hidden;background:url(bg.png) no-repeat} 
ul li a{ padding-left:5px}
複製代碼

css sprite關鍵代碼與解釋

首先在ul li span裏插入背景圖 ul.Sprites li span{ background:url(bg.png) no-repeat} 給span設置背景圖片。再分別對不一樣span class設置對於圖標背景定位具體值 ul li .a1{ background-position: -62px -32px}設置背景圖片做爲對應盒子對象背景後向左「移動」62px，向上「移動」32px開始顯示此背景圖標 ul li .a2{ background-position: -86px -32px}設置背景圖片做爲對應盒子對象背景後向左「移動」86px，向上「移動」32px開始顯示此背景圖標 ul li .a3{ background-position: -110px -32px}設置背景圖片做爲對應盒子對象背景後向左「移動」110px，向上「移動」32px開始顯示此背景圖標 ul li .a4{ background-position: -133px -32px}設置背景圖片做爲對應盒子對象背景後向左「移動」133px，向上「移動」32px開始顯示此背景圖標 ul li .a5{ background-position: -158px -32px}設置背景圖片做爲對應盒子對象背景後向左「移動」158px，向上「移動」32px開始顯示此背景圖標

重點：背景background-position屬性有兩個值，第一個表明水平位置的值（可爲正可爲負），第二個表明垂直方向的值（可爲正可爲負），當爲正數時，表明背景圖片做爲對象盒子背景圖片時靠左和靠上多少開始顯示背景圖片；當爲負數時表明背景圖片做爲盒子對象背景圖片，將背景圖片超出盒子對象左邊多遠，超出盒子對象上邊多遠開始顯示此背景圖片。