home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Background Image: คู่มือฉบับสมบูรณ์ (หลายรูป, ขนาด, ตำแหน่ง)

คุณสมบัติ background-image เปลี่ยนพื้นหลังเว็บไซต์เป็นภาพ ใช้ background-image: url(url_of_image) รองรับหลายภาพทับกันได้

CSS Background Image

background-image กำหนดภาพเป็นพื้นหลังของ元素 — มักใช้กับหน้าทั้งเพจหรือส่วนหนึ่ง

ไวยากรณ์: background-image: url(imageUrl);

ตัวอย่าง: แบนเนอร์คาเฟ่

HTML: <div class="image"> <p class="header">Welcome to The Coffee Grind</p> </div>
CSS: .image { background-image: url(https://images.pexels.com/...); height: 250px; }
.header { padding-top: 50px; color: white; font-size: 20px; text-align: center; }

หลายภาพพื้นหลัง (Multiple Background Images)

.image { background-image: url(icon.png), url(bg.jpg); height: 250px; }

ภาพแรกอยู่ชั้นบนสุด ภาพถัดไปอยู่ด้านหลัง

ขนาดภาพพื้นหลัง (Background Image Size)

background-size 4 ค่า:

  • auto: เบราว์เซอร์ตัดสินใจ (default)
  • contain: แสดงภาพเต็ม แม้ไม่เต็มคอนเทนเนอร์ (มีพื้นที่ว่าง)
  • cover: ยืดภาพครอบคลุมคอนเทนเนอร์ทั้งหมด (อาจถูกตัด)
  • length: กำหนด width height เอง (ค่าแรก width, ค่าที่สอง height)

ตำแหน่งภาพพื้นหลัง (Position Background Image)

background-origin 3 ค่า:

  • border-box: เทียบจาก border box
  • content-box: เทียบจาก content box
  • padding-box: เทียบจาก padding box (default)

ตัวอย่าง: background-origin: content-box; background-repeat: no-repeat; — ภาพปรากฏ相对于 content box มีช่องว่างขาวระหว่าง border และภาพ

สรุป

background-image ตั้งพื้นหลังเป็นภาพ สร้างพื้นหลังกำหนดเอง แทนสี/gradient รองรับหลายภาพ, ควบคุมขนาดด้วย background-size, ตำแหน่งด้วย background-origin — พร้อมสร้างพื้นหลังมืออาชีพแล้ว!