CSS 圖像拼合技術(shù)
圖像拼合
圖像拼合就是單個(gè)圖像的集合。
有許多圖像的網(wǎng)頁可能需要很長(zhǎng)的時(shí)間來加載和生成多個(gè)服務(wù)器的請(qǐng)求。
使用圖像拼合會(huì)降低服務(wù)器的請(qǐng)求數(shù)量，并節(jié)省帶寬。
圖像拼合 - 簡(jiǎn)單實(shí)例
與其使用三個(gè)獨(dú)立的圖像，不如我們使用這種單個(gè)圖像：
有了CSS，我們可以只顯示我們需要的圖像的一部分。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.home {
width: 46px;
height: 44px;
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") 0 0;
}
.next {
width: 43px;
height: 44px;
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif") -91px 0;
}
</style>
</head>
<body>
<p class="home"></p><br><br>
<p class="next"></p>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析：
width：46px; height：44px; -- 定義我們使用的那部分圖像
background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")
0 0; - 定義背景圖像和它的位置（左0px，頂部0px）
這是使用圖像拼合最簡(jiǎn)單的方法，現(xiàn)在我們使用鏈接和懸停效果。
圖像拼合 - 創(chuàng)建一個(gè)導(dǎo)航列表
我們想使用拼合圖像 ("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")，以創(chuàng)建一個(gè)導(dǎo)航列表。
我們將使用一個(gè)HTML列表，因?yàn)樗梢枣溄?，同時(shí)還支持背景圖像：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif') -91px 0;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="/"></a></li>
<li id="prev"><a href="/css/"></a></li>
<li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析：
#navlist{position:relative;} - 位置設(shè)置相對(duì)定位，讓里面的絕對(duì)定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設(shè)置為0，列表樣式被刪除，所有列表項(xiàng)是絕對(duì)定位
#navlist li, #navlist a{height:44px;display:block;} - 所有圖像的高度是44px
現(xiàn)在開始每個(gè)具體部分的定位和樣式：
#home{left:0px;width:46px;} - 定位到最左邊的方式，以及圖像的寬度是46px
#home{background:url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
") 0 0;} - 定義背景圖像和它的位置（左0px，頂部0px）#prev{left:63px;width:43px;} - 右側(cè)定位63px（＃home寬46px+項(xiàng)目之間的一些多余的空間），寬度為43px。
#prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') -47px 0;} - 定義背景圖像右側(cè)47px（＃home寬46px+分隔線的1px）#next{left:129px;width:43px;}- 右邊定位129px(#prev 63px + #prev寬是43px + 剩余的空間), 寬度是43px.
#next{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
') no-repeat -91px 0;} - 定義背景圖像右邊91px（＃home 46px+1px的分割線+＃prev寬43px+1px的分隔線）
圖像拼合s - 懸停效果
現(xiàn)在，我們希望我們的導(dǎo)航列表中添加一個(gè)懸停效果。
 | :hover 選擇器用于鼠標(biāo)懸停在元素上的顯示的效果 提示： :hover 選擇器可以運(yùn)用于所有元素。 |
|---|
我們的新圖像 ("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif") 包含三個(gè)導(dǎo)航圖像和三幅圖像：
因?yàn)檫@是一個(gè)單一的圖像，而不是6個(gè)單獨(dú)的圖像文件，當(dāng)用戶停留在圖像上不會(huì)有延遲加載。
我們添加懸停效果只添加三行代碼：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 0;}
#home a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px 0;}
#prev a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px 0;}
#next a:hover{background: url('https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif') -91px -45px;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析：
由于該列表項(xiàng)包含一個(gè)鏈接，我們可以使用：hover偽類
#home a:hover{background: transparent url("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif
") 0 -45px;} - 對(duì)于所有三個(gè)懸停圖像，我們指定相同的背景位置，只是每個(gè)再向下45px