CSS รูปภาพสไปรท์

สารบัญ

    แสดงสารบัญ

รูปภาพสไปรท์

สไปรท์รูปภาพคือชุดของรูปภาพที่รวมไว้ในรูปภาพเดียว

หน้าเว็บที่มีรูปภาพจำนวนมากอาจใช้เวลานานในการโหลดและสร้าง คำขอเซิร์ฟเวอร์หลายรายการ

การใช้ภาพสไปรท์จะลดจำนวนคำขอของเซิร์ฟเวอร์และบันทึก แบนด์วิธ

รูปภาพสไปรท์ - ตัวอย่างง่ายๆ

แทนที่จะใช้ภาพสามภาพแยกกัน เราใช้ภาพเดียวนี้ ("img_navsprites.gif"):

ด้วย CSS เราสามารถแสดงเฉพาะส่วนของภาพที่เราต้องการได้

ในตัวอย่างต่อไปนี้ CSS ระบุว่าส่วนใดของ "img_navsprites.gif" ภาพที่จะแสดง:

ตัวอย่าง

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

ตัวอย่างที่อธิบาย:

<img id="home" src="img_trans.gif">

- กำหนดเฉพาะรูปภาพโปร่งใสขนาดเล็กเท่านั้น เนื่องจากแอตทริบิวต์ src ไม่สามารถเว้นว่างได้ รูปภาพที่แสดงจะเป็นภาพพื้นหลังที่เราระบุใน CSS

width: 46px; height: 44px;

- กำหนดส่วนของภาพที่เราต้องการใช้

background: url(img_navsprites.gif) 0 0;

- กำหนดภาพพื้นหลังและตำแหน่ง (ซ้าย 0px, 0px ด้านบน)

นี่เป็นวิธีที่ง่ายที่สุดในการใช้ภาพสไปรท์ ตอนนี้เราต้องการขยายโดยใช้ลิงก์และเอฟเฟกต์โฮเวอร์

Image Sprites - สร้างรายการการนำทาง

เราต้องการใช้ภาพสไปรท์ ("img_navsprites.gif") เพื่อสร้างรายการการนำทาง

เราจะใช้รายการ HTML เนื่องจากอาจเป็นลิงก์และรองรับภาพพื้นหลังด้วย:

ตัวอย่าง

#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;
  background: url('img_navsprites.gif') 
0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') 
-91px 0;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<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;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</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>

ตัวอย่างที่อธิบาย:

#navlist {position:relative;}

- ตำแหน่งถูกตั้งค่าให้สัมพันธ์เพื่อให้สามารถวางตำแหน่งภายในได้อย่างสมบูรณ์

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- ระยะขอบและช่องว่างภายในถูกตั้งค่าเป็น 0 รูปแบบรายการจะถูกลบออก และรายการทั้งหมดอยู่ในตำแหน่งที่แน่นอน

#navlist li, #navlist a {height:44px;display:block;}

- ความสูงของภาพทั้งหมดคือ 44px

ตอนนี้เริ่มวางตำแหน่งและสไตล์สำหรับแต่ละส่วนเฉพาะ:

#home {left:0px;width:46px;}

- วางตำแหน่งไปทางซ้ายจนสุด และความกว้างของรูปภาพคือ 46px

#home {background:url(img_navsprites.gif) 0 0;}

- กำหนดภาพพื้นหลังและตำแหน่ง (ซ้าย 0px, 0px ด้านบน)

#prev {left:63px;width:43px;}

- ตำแหน่ง 63px ทางด้านขวา (#ความกว้างของบ้าน 46px + ช่องว่างเพิ่มเติมระหว่างรายการ) และความกว้างคือ 43px

#prev {background:url('img_navsprites.gif') -47px 0;}

- กำหนดภาพพื้นหลัง 47px ทางด้านขวา (#home width 46px + 1px line ตัวแบ่ง)

#next {left:129px;width:43px;}

- ตำแหน่ง 129px ทางด้านขวา (จุดเริ่มต้นของ #prev คือ 63px + #prev กว้าง 43px + ช่องว่างเพิ่มเติม) และความกว้างคือ 43px

#next {background:url('img_navsprites.gif') -91px 0;}

- กำหนดภาพพื้นหลัง 91px ทางด้านขวา (#home width 46px + 1px ตัวแบ่งบรรทัด + #ก่อนหน้า ความกว้าง 43px + ตัวแบ่งบรรทัด 1px)

ภาพสไปรท์ - เอฟเฟกต์โฮเวอร์

ตอนนี้เราต้องการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับรายการการนำทางของเรา

เคล็ดลับ: ตัวเลือก :hover สามารถใช้ได้กับทุกองค์ประกอบ ไม่ใช่แค่ในลิงก์เท่านั้น

รูปภาพใหม่ของเรา ("img_navsprites_hover.gif") มีรูปภาพการนำทางสามภาพ และรูปภาพสามรูปที่ใช้สำหรับเอฟเฟกต์โฮเวอร์:

เนื่องจากนี่เป็นภาพเดียว และไม่ใช่ไฟล์แยกกันหกไฟล์ จึง ไม่มี ความล่าช้าในการโหลดเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ

เราเพิ่มโค้ดเพียงสามบรรทัดเพื่อเพิ่มเอฟเฟกต์โฮเวอร์:

ตัวอย่าง

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px 
-45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px 
-45px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<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;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.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>

ตัวอย่างอธิบาย:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- สำหรับรูปภาพโฮเวอร์ทั้งสามภาพ เราระบุตำแหน่งพื้นหลังเดียวกัน โดยให้ลึกลงไปอีกเพียง 45px เท่านั้น