ภาพแบบ Sprite
เทพดาภาพเป็นคอลเลกชันของภาพที่ใส่ลงไปในภาพเดียว
หน้าเว็บที่มีภาพจำนวนมากสามารถใช้เวลานานในการโหลดและสร้างการร้องขอเซิร์ฟเวอร์หลาย
การใช้ภาพแบบ Sprite จะช่วยลดจำนวนของการร้องขอเซิร์ฟเวอร์และประหยัดแบนด์วิดธ์
Sprites ภาพ - ตัวอย่างง่ายๆ
แทนการใช้สามแยกภาพเราใช้นี้ภาพเดียว ("img_navsprites.gif") :
ด้วย CSS เราสามารถแสดงเพียงส่วนหนึ่งของภาพที่เราต้องการ
ในตัวอย่างต่อไป CSS ระบุซึ่งเป็นส่วนหนึ่งของ "img_navsprites.gif" ภาพที่จะแสดง:
ตัวอย่างอธิบายว่า:
-
<img id="home" src="img_trans.gif">- กำหนดเพียงภาพโปร่งใสขนาดเล็กเพราะคุณลักษณะ src ต้องไม่ว่างเปล่า ภาพที่แสดงจะเป็นภาพพื้นหลังที่เราระบุใน CSS -
width: 46px; height: 44px;width: 46px; height: 44px;- กำหนดส่วนของภาพที่เราต้องการใช้ -
background: url(img_navsprites.gif) 0 0;- กำหนดภาพพื้นหลังและตำแหน่ง (0px ซ้ายด้านบน 0px)
วิธีนี้เป็นวิธีที่ง่ายที่สุดที่จะใช้สไปรต์ภาพตอนนี้เราต้องการที่จะขยายได้โดยใช้การเชื่อมโยงและโฉบผลกระทบ
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;
}
ลองตัวเอง» ตัวอย่างอธิบายว่า:
- #navlist {position:relative;} - ตำแหน่งถูกตั้งค่าให้ญาติที่จะอนุญาตให้ตำแหน่งแน่นอนภายในนั้น
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - อัตรากำไรขั้นต้นและ padding ตั้งค่าเป็น 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 ไปทางขวา (#home 46px กว้าง + บางพื้นที่พิเศษระหว่างรายการ) และความกว้างเป็น 43px
- #prev {background:url('img_navsprites.gif') -47px 0;} - กำหนด 47px ภาพพื้นหลังไปทางขวา (#home กว้าง 46px + 1px เส้นแบ่ง)
- #next {left:129px;width:43px;} - ตำแหน่ง 129px ไปทางขวา (จุดเริ่มต้นของ #prev เป็น 63px + ความกว้าง #prev 43px + พื้นที่พิเศษ) และความกว้างเป็น 43px
- #next {background:url('img_navsprites.gif') -91px 0;} - กำหนด 91px ภาพพื้นหลังไปทางขวา (#home กว้าง 46px + 1px เส้นแบ่งความกว้าง + #prev 43px + 1px เส้นแบ่ง)
ภาพแบบ Sprite - ผลกระทบเลื่อน
ตอนนี้เราต้องการที่จะเพิ่มผลโฉบไปยังรายการนำทางของเรา
 | แนะนำ: :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;
} ลองตัวเอง» ตัวอย่างอธิบายว่า:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - สำหรับทั้งสามภาพโฉบเราระบุตำแหน่งพื้นหลังเหมือนกันเพียง 45px ต่อไปลง