คู่มือการศึกษานี้จะสาธิตวิธีการใช้ภาพพื้นหลังกับ CSS เริ่มกันเลย!
จะใช้ภาพพื้นหลังหลายภาพด้วย CSS ได้อย่างไร
ซีเอสเอส “ พื้นหลัง คุณสมบัติ ” เป็นคุณสมบัติชวเลขที่มีพื้นหลัง สิ่งที่แนบมากับพื้นหลัง คลิป รูปภาพ การทำซ้ำ ที่มา ขนาด และตำแหน่ง คุณสมบัติพื้นหลังสามารถใช้เพื่อระบุ URL ของภาพหลายภาพ ภาพเหล่านั้นจะถูกจัดตำแหน่งและตั้งค่าตามนั้น
ลองมาตัวอย่างที่องค์ประกอบ div หนึ่งมีภาพเพียงภาพเดียวเป็นโลโก้ของหน้าเว็บ ในขณะที่องค์ประกอบที่สองมีภาพสามภาพ
ตัวอย่าง: การเพิ่มภาพพื้นหลังหลายภาพด้วย CSS
ใน HTML ให้เพิ่มองค์ประกอบ div สำหรับโลโก้และระบุชื่อคลาส เช่น เราตั้งชื่อว่า “ โลโก้ '. div ที่สองใช้หลายภาพ เราจึงตั้งชื่อว่า ' หลายภาพ '. อย่างไรก็ตาม คุณสามารถระบุชื่อคลาสได้ตามต้องการ
HTML
< แผนก ระดับ = 'โลโก้' >< / แผนก >< แผนก ระดับ = 'หลายภาพ' >< / แผนก >
ในหัวข้อถัดไป เราจะปรับแต่งรูปภาพโดยใช้คุณสมบัติพื้นหลังของ CSS
รูปแบบ 'โลโก้' div
.โลโก้ {ความกว้าง : 100% ;
ความสูง : 50พิกเซล ;
การขยายความ : 5พิกเซล ;
ขอบ : 5พิกเซล ;
ขนาดพื้นหลัง : 100px ;
พื้นหลังซ้ำ : ไม่ซ้ำ ;
ภาพพื้นหลัง : URL ( ภาพ/linux-logo.png ) ;
}
องค์ประกอบ div กับคลาส “ โลโก้ ” ใช้กับคุณสมบัติต่อไปนี้:
- “ ความกว้าง คุณสมบัติ ” ใช้สำหรับตั้งค่าความกว้างขององค์ประกอบเป็น “ 100% '.
- “ ความสูง คุณสมบัติ ” ใช้สำหรับกำหนดความสูงขององค์ประกอบเป็น “ 50พิกเซล '.
- “ การขยายความ คุณสมบัติ ” ใช้สำหรับตั้งค่า “ 5พิกเซล ” เว้นวรรครอบเนื้อหาที่ระบุขององค์ประกอบ
- “ ขอบ คุณสมบัติ ” ใช้สำหรับตั้งค่า “ 5พิกเซล ” ช่องว่างรอบองค์ประกอบ
- “ ขนาดพื้นหลัง คุณสมบัติ ” กำหนดขนาดภาพพื้นหลังขององค์ประกอบเป็น “ 100px '.
- “ พื้นหลังซ้ำ ” มีค่า “ ไม่ซ้ำ ” แสดงพื้นหลังเพียงครั้งเดียว
- “ ภาพพื้นหลัง คุณสมบัติ ” ใช้สำหรับระบุ URL ของรูปภาพ
สไตล์ div 'หลายภาพ'
.multiple-ภาพ {ความกว้าง : 90% ;
ความสูง : 45vh ;
ขอบ : 1px อัตโนมัติ ;
การขยายความ : 20px ;
ขนาดพื้นหลัง : 150px ;
สีพื้นหลัง : rgb ( 157 , 154 , 151 ) ;
ภาพพื้นหลัง : URL ( ภาพ/office.png ) , URL ( ภาพ/html.png ) , URL ( ภาพ/laptop.png ) ;
พื้นหลังซ้ำ : ไม่ซ้ำ , ไม่ซ้ำ , ไม่ซ้ำ ;
ตำแหน่งพื้นหลัง : ซ้าย , ศูนย์ , ขวา ;
}
ตอนนี้ให้จัดรูปแบบคอนเทนเนอร์อื่นดังนี้:
- “ สีพื้นหลัง คุณสมบัติ ” ระบุสีของพื้นหลังขององค์ประกอบ
- “ ภาพพื้นหลัง คุณสมบัติ ” ระบุ URL รูปภาพหลายรายการ
- “ พื้นหลังซ้ำ คุณสมบัติ ” ตั้งค่าสำหรับรูปภาพตามลำดับของรูปภาพที่ระบุในคุณสมบัติภาพพื้นหลัง รูปภาพทั้งสองถูกตั้งค่าเป็นแบบไม่ซ้ำ หมายความว่ารูปภาพเหล่านั้นจะแสดงบนเบราว์เซอร์เพียงครั้งเดียว
- “ ตำแหน่งพื้นหลัง ” ปรับตำแหน่งภาพตามลำดับภาพที่ระบุโดยคุณสมบัติ background-image ภาพแรกจะวางไว้ทางด้านซ้าย ภาพที่สองตรงกลาง และภาพที่สามจะวางไว้ทางด้านขวา
เมื่อระบุรหัสที่ให้ไว้ข้างต้น ผลลัพธ์ในเบราว์เซอร์จะมีลักษณะดังนี้:
ด้วยวิธีนี้เราสามารถปรับตำแหน่งของรูปภาพหลาย ๆ รูปด้วย CSS
บทสรุป
เพื่อให้แอปพลิเคชันสนุกสนานและโต้ตอบได้ นักพัฒนาจะใช้รูปภาพและสีต่างๆ เราสามารถตั้งค่ารูปภาพหลายรูปด้วยคุณสมบัติพื้นหลังของ CSS เช่น ตำแหน่งพื้นหลัง พื้นหลังซ้ำ ขนาดพื้นหลัง และอื่นๆ คู่มือนี้ได้สาธิตการใช้ภาพพื้นหลังหลายภาพพร้อมตัวอย่าง CSS