1. Home
  2. CSS เทคโนโลยีภาพโมเสค

บทช่วยสอน CSS เทคโนโลยีภาพโมเสค ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ภาพสปลิต,ภาพ Split - ตัวอย่างง่ายๆ,ตัวอย่าง,แผ่ภาพ - เพื่อสร้างรายการนำทาง,ตัวอย่าง,แผ่ภาพ s - โฉบผล,ตัวอย่าง,

CSS เทคโนโลยีภาพโมเสค

ภาพสปลิต

แผ่ภาพเป็นชุดของภาพบุคคล

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

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

ภาพ Split - ตัวอย่างง่ายๆ

แทนการใช้ภาพสามแยกต่างหากในขณะที่เราใช้นี้ภาพเดียว ( "img_navsprites.gif"):

ภาพนำทาง

ด้วย CSS เราสามารถแสดงเพียงส่วนหนึ่งของภาพที่เราจำเป็นต้องมี

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

ตัวอย่าง

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

ลอง»

ตัวอย่างการวิเคราะห์:

  • <ระดับ Img = "บ้าน" src = "img_trans.gif" /> - เพราะพวกเขาไม่สามารถที่ว่างเปล่าคุณลักษณะ src กำหนดเพียงภาพใสขนาดเล็ก ภาพที่ปรากฏจะเป็นที่เราระบุในภาพพื้นหลัง CSS
  • ความกว้าง: 46px; ความสูง: 44px; - กำหนดส่วนหนึ่งของภาพที่เราใช้
  • พื้นหลัง: URL (img_navsprites.gif) 0 0; - ภาพพื้นหลังที่กำหนดเองและตำแหน่ง (0px ซ้ายด้านบน 0px)

นี้จะกระทำโดยใช้ภาพแยกวิธีที่ง่ายที่สุดและตอนนี้เราใช้การเชื่อมโยงและโฉบผลกระทบ

แผ่ภาพ - เพื่อสร้างรายการนำทาง

เราต้องการที่จะใช้ภาพ Split ( "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;}
#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") มีสามภาพนำทางและสามภาพ:

ภาพนำทาง

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

เราเพิ่มผลโฉบเพิ่มเพียงสามบรรทัดของรหัส:

ตัวอย่าง

#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: โฉบ {พื้นหลัง: ใส URL (img_navsprites_hover.gif) 0 -45px;} - สำหรับทั้งสามภาพโฉบเราระบุตำแหน่งพื้นหลังเดียวกัน แต่แล้วลง 45px แต่ละ

บทแนะนำยอดนิยม

Contact US

CSS เทคโนโลยีภาพโมเสค
10/30