สีบริการ CSS การทดบวนพื้นหลัง

CSS background-repeat

โดยเริ่มต้นbackground-image ขอบเขตซ้ำรูปภาพทั้งแนวนอนและแนวตั้ง

บางรูปภาพเหมาะสมกับการซ้ำตามแนวนอนหรือตามแนวตั้ง เท่านั้น ไม่เช่นนั้นมันจะดูบนไป อย่างเช่น:

ตัวอย่าง

body {
  background-image: url("gradient_bg.png");
}

ทดสอบด้วยตัวเอง

ถ้ารูปภาพด้านบนซ้ำเฉพาะตามแนวนอน (background-repeat: repeat-x;) มันจะดูดีขึ้น:

ตัวอย่าง

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

ทดสอบด้วยตัวเอง

คำเตือน：ถ้าต้องการซ้ำรูปภาพตามแนวตั้ง โปรดตั้งค่า background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat นิยามสำหรับการแสดงภาพ배경เพียงครั้งเดียว:

ตัวอย่าง

ภาพ배경แสดงขึ้นเพียงครั้งเดียว:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

ทดสอบด้วยตัวเอง

ในตัวอย่างที่ผ่านมา ภาพ배경และข้อความตั้งอยู่ในตำแหน่งเดียวกัน พวกเราต้องการเปลี่ยนตำแหน่งของภาพเพื่อที่จะไม่ให้ภาพขัดขวางข้อความ

CSS background-position

background-position นิยามทางเลือกสำหรับตำแหน่งภาพ배경

ตัวอย่าง

จัดการภาพ배경ในมุมขวาบน:

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

ทดสอบด้วยตัวเอง