ขอบเขตการสร้าง: ภาพพื้นหลังทั้งหมดหน้า

เรียนรู้ว่าจะใช้ CSS สร้างภาพพื้นหลังทั้งหมดหน้า

ภาพพื้นหลังทั้งหมดหน้า

เรียนรู้ว่าจะสร้างภาพพื้นหลังที่คลุมทั้งหมดหน้าต่างบราวเซอร์ ตัวอย่างดังนี้แสดงภาพพื้นหลังที่ตอบสนองต่อหน้าต่างทั้งหมด (และครึ่งหน้า):

การแสดง - ภาพพื้นหลังทั้งหมดหน้า

การแสดง - ภาพพื้นหลังครึ่งหน้า

ขอบเขตการสร้างภาพที่ครอบคลุมทั้งหมด

ใช้องค์ประกอบส่วนที่มีภาพพื้นหลังสูง 100% ในองค์ประกอบนั้น

提示：ใช้ 50% สามารถสร้างภาพพื้นหลังหน้าที่ครึ่งหน้าได้ หลังจากนั้นใช้คุณสมบัติพื้นหลังต่อไปนี้เพื่อทำให้ภาพศูนย์กลางและยกตัวได้เป็นอย่างดี:

注意：เพื่อให้ภาพคลุมทั้งหมดหน้าจอคอมพิวเตอร์ คุณจะต้องเพิ่ม height: 100% ใช้ร่วมกัน <html> และ <body>:

ภาพพื้นหลังหน้าทั้งหมด：

body, html {
  height: 100%;
}
.bg {
  /* ภาพที่ใช้ */
  background-image: url("dancer.jpg");
  /* ความสูงทั้งหมด */
  height: 100%;
  /* ยังคงที่จะซูมและยกตัวภาพให้ศูนย์กลางได้ดี */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

亲自试一试

半页背景图像：

.bg {
    height: 50%;
}

亲自试一试