CSS สไตล์ภาพสไลด์

ภาพสปริต

ภาพสปริตเป็นชุดภาพที่มีในภาพเดียว

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

การใช้ภาพสปริตจะลดจำนวนการขอคำสั่งจากเซิร์ฟเวอร์และปรับปรุงพื้นที่จำนวนของโบราณคดี

ภาพสปริต - ตัวอย่างเรียบๆ

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

แบบดูแนวทาง

ด้วยการใช้ CSS เราสามารถแสดงส่วนของภาพที่ต้องการเพียงโดยเท่านั้น

ในตัวอย่างด้านล่างนี้ ตัวเลือก CSS กำหนดส่วนของภาพ "navsprites.gif" ที่จะแสดง

ตัวอย่าง

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

ทดลองด้วยตัวเอง

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

  • <img id="home" src="trans.gif"> - กำหนดภาพโปร่งอากาศเล็กๆ เพราะมีคุณสมบัติ src ที่เป็นค่าว่าง แต่ภาพที่แสดงออกมาจะเป็นภาพพื้นหลังที่เรากำหนดใน CSS
  • width: 46px; height: 44px; - กำหนดส่วนของภาพที่เราต้องการใช้
  • background: url(navsprites.gif) 0 0; - กำหนดภาพพื้นหลังและตำแหน่งของมัน (left 0px, top 0px)

ภาพสปริต - สร้างรายการนำทาง

เราต้องการใช้ภาพสปริต ("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;
}

ทดลองด้วยตัวเอง

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

  • #navlist {position:relative;} - ตำแหน่งถูก設定เป็นเรlativ positioning เพื่ออนุญาตให้มีการเลื่อนตำแหน่งอิสระในในนั้น
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - กำหนดมุมด้านนอกและมุมด้านในเป็น 0 ลบรูปแบบ list-style และทุกบรรทัดรายการทั้งหมดเป็นตำแหน่งอิสระ
  • #navlist li, #navlist a {height:44px;display:block;} - ความสูงของทุกภาพคือ 44px

ตอนนี้เริ่มต้นโดยการตั้งตำแหน่งและรูปแบบสำหรับส่วนที่เฉพาะตัว:

  • #home {left:0px;width:46px;} - ตั้งตำแหน่งซ้ายตลอดเวลา ความกว้างภาพ 46px
  • #home {background:url(navsprites.gif) 0 0;} - กำหนดภาพพื้นหลังและตำแหน่ง (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - ตั้งตำแหน่งขวา 63px (#home ความกว้าง 46px + ช่องว่างเพิ่มเติมระหว่างโครงการ)
  • #prev {background:url('navsprites.gif') -47px 0;} - กำหนดภาพพื้นหลังมุมขวา 47px (#home ความกว้าง 46px + 1px ช่องเชื่อม)
  • #next {left:129px;width:43px;} - ตั้งตำแหน่งขวา 129px (#prev ตั้งตำแหน่ง 63px + ความกว้างของ #prev คือ 43px + ช่องว่างเพิ่มเติม)
  • #next {background:url('navsprites.gif') -91px 0;} - กำหนดภาพพื้นหลังมุมขวา 91px (#home ความกว้าง 46px + 1px ช่องเชื่อม + #prev ความกว้าง 43px + 1px ช่องเชื่อม)

Image Sprite - ปรากฎการณ์ hover

ตอนนี้ เราจะเพิ่มปรากฎการณ์ hover ในรายการนำทาง。

คำเตือน::hover selector สามารถใช้กับองค์ประกอบทั้งหมด ไม่เพียงแค่สำหรับลิงก์เท่านั้น。

ภาพของเรา ("navsprites_hover.gif") มีภาพนำทางสามภาพและภาพสำหรับปรากฎการณ์ hover สามภาพ:

แบบดูแนวทาง

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

เราเพิ่มเพียงสามบรรทัดรหัสเพื่อสร้างปรากฎการณ์ hover:

ตัวอย่าง

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

ทดลองด้วยตัวเอง

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

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - พวกเรากำหนดตำแหน่งพื้นหลังที่เหมือนกันสำหรับสามรูปภาพหลักเมื่อมีการเห็นละเอียด 45 พิกเซลล์ลง