Teknologi jahitan imej CSS


Jahitan imej

Jahitan imej ialah koleksi imej tunggal.

Halaman web dengan banyak imej mungkin mengambil masa yang lama untuk memuatkan dan menjana permintaan kepada berbilang pelayan.

Menggunakan jahitan imej akan mengurangkan bilangan permintaan pelayan dan menjimatkan lebar jalur.

Jahitan imej - contoh mudah

Daripada menggunakan tiga imej berasingan, mari gunakan satu imej seperti ini:

img_navsprites.gif

Dengan CSS kita boleh memaparkan hanya bahagian imej yang kita perlukan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh analisis:

  • lebar: 46px; tinggi: 44px; >

    • latar belakang: url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif")
  • 0 0; kedudukan (kiri 0px , 0px atas)


    • Ini adalah cara paling mudah untuk menggunakan jahitan imej, kini kami menggunakan pautan dan kesan tuding.

Jahitan imej - Buat senarai navigasi

Kami mahu menggunakan imej bercantum ("https://img.php.cn/upload/image/903/855/589/ 1550121182683639 .gif") untuk membuat senarai navigasi.

Kami akan menggunakan senarai HTML kerana ia boleh dipautkan dan turut menyokong imej latar belakang:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh analisis:

  • #navlist{position:relative;} - Tetapkan kedudukan relatif untuk membuat kedudukan mutlak di dalam

  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin dan padding ditetapkan kepada 0, gaya senarai dialih keluar dan semua item senarai adalah Kedudukan mutlak

  • #navlist li, #navlist a{height:44px;display:block;} - ketinggian semua imej ialah 44px

sekarang Mulakan kedudukan dan gayakan setiap bahagian tertentu:

  • #home{left:0px;width:46px;} - diletakkan di hujung kiri, dan lebar imej ialah 46px

  • #home{background:url("https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
    ") 0 0 ;} - Tentukan imej latar belakang dan kedudukannya (0px kiri, 0px atas)

  • #prev{left:63px;width:43px;} - Kedudukan kanan 63px (#home width 46px + item beberapa ruang tambahan antara), dengan lebar 43px.

  • #prev{background:url('https://img.php.cn/upload/image/903/855/589/1550121182683639.gif
    ') -47px 0;} - Tentukan imej latar belakang 47px ke kanan (#lebar rumah 46px + 1px pembahagi)

  • #next{left:129px;width:43px;} - Kedudukan kanan 129px( # sebelumnya 63px + #prev lebar ialah 43px + baki ruang), lebar ialah 43px.

  • #next{background:url('https://img.php.cn/upload/ image/903/855/589/1550121182683639.gif
    ') tiada ulangan -91px 0;} - Tentukan 91px di sebelah kanan imej latar belakang (#home 46px+1px garis pemisah + #prev wide 43px+1px garis pemisah)

Sambungan Imej - Kesan Tuding

Sekarang kami mahu menambah kesan tuding pada senarai navigasi kami.

lamp.gif
lamp.gif:hover 选择器用于鼠标悬停在元素上的显示的效果

提示： :hover 选择器可以运用于所有元素。
:tuding pilih Pemilih digunakan untuk memaparkan kesan apabila tetikus melayang di atas elemen <🎜><🎜><🎜><🎜><🎜><🎜>Petua: <🎜> Pemilih :hover boleh digunakan pada semua elemen.

Imej baharu kami ("https://img.php.cn/upload/course/000/000/015/5c64fdaa5b0ba752.gif") mengandungi tiga imej navigasi dan tiga imej:

Oleh kerana ini adalah imej tunggal dan bukannya 6 fail imej yang berasingan, tidak akan ada pemuatan malas apabila pengguna menuding ke atas imej.

Kami hanya menambah tiga baris kod untuk menambah kesan tuding:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Analisis kejadian:

  • Sejak item senarai mengandungi pautan, kami Anda boleh menggunakan: hover pseudo-class

  • #home a:hover{background: transparent url("https://img.php.cn/upload/course /000/000/015/ 5c64fdaa5b0ba752.gif
    ") 0 -45px;} - Untuk ketiga-tiga imej tuding, kami menentukan kedudukan latar belakang yang sama, hanya 45px lebih jauh ke bawah setiap satu

←
→