国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS 在線手冊 / CSS 圖像拼合技術

CSS 圖像拼合技術


圖像拼合

圖像拼合就是單個圖像的集合。

有許多圖像的網(wǎng)頁可能需要很長的時間來加載和生成多個服務器的請求。

使用圖像拼合會降低服務器的請求數(shù)量,并節(jié)省帶寬。


圖像拼合 - 簡單實例

與其使用三個獨立的圖像,不如我們使用這種單個圖像:

img_navsprites.gif

有了CSS,我們可以只顯示我們需要的圖像的一部分。

實例

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析:

  • width:46px; height:44px; -- 定義我們使用的那部分圖像

  • background: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")
    0 0; -  定義背景圖像和它的位置(左0px,頂部0px)

這是使用圖像拼合最簡單的方法,現(xiàn)在我們使用鏈接和懸停效果。


圖像拼合 - 創(chuàng)建一個導航列表

我們想使用拼合圖像 ("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif"),以創(chuàng)建一個導航列表。

我們將使用一個HTML列表,因為它可以鏈接,同時還支持背景圖像:

實例

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析:

  • #navlist{position:relative;} - 位置設置相對定位,讓里面的絕對定位

  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設置為0,列表樣式被刪除,所有列表項是絕對定位

  • #navlist li, #navlist a{height:44px;display:block;} - 所有圖像的高度是44px

現(xiàn)在開始每個具體部分的定位和樣式:

  • #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;} - 右側定位63px(#home寬46px+項目之間的一些多余的空間),寬度為43px。

  • #prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
    ') -47px 0;} - 定義背景圖像右側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)在,我們希望我們的導航列表中添加一個懸停效果。

lamp.gif:hover 選擇器用于鼠標懸停在元素上的顯示的效果

提示: :hover 選擇器可以運用于所有元素。

我們的新圖像 ("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif") 包含三個導航圖像和三幅圖像:

因為這是一個單一的圖像,而不是6個單獨的圖像文件,當用戶停留在圖像上不會有延遲加載。

我們添加懸停效果只添加三行代碼:

實例

<!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>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例解析:

  • 由于該列表項包含一個鏈接,我們可以使用:hover偽類

  • #home a:hover{background: transparent url("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif
    ") 0 -45px;} - 對于所有三個懸停圖像,我們指定相同的背景位置,只是每個再向下45px