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