CSS ภาพ배경คำเสรียะสั้น

CSS background - คำเสรียะสั้น

ถ้าต้องการย่อรหัส ก็สามารถกำหนดขอบเขตภาพ배경ทั้งหมดในขอบเขตเดียว มันถูกเรียกว่าคำเสรียะสั้น

แทนที่จะเขียนเช่นนี้:

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

คุณสามารถใช้คำเสรียะสั้น background:

ตัวอย่าง

ตั้งค่าขอบเขตภาพ배경ด้วยคำเสรียะสั้นในคำเสรียะเดียว

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

ลองทดลองด้วยตัวเอง

เมื่อใช้คำเสรียะสั้น ลำดับของค่าของขอบเขตคือ:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

หากขอบเขตหนึ่งขาดหายแล้วก็ไม่มีสิ่งผิดปกติอะไร แต่ควรตั้งค่าค่าอื่นๆ ตามลำดับนี้ โปรดทำการตรวจสอบในตัวอย่างด้านบน เราไม่ได้ใช้ขอบเขต background-attachment เพราะมันไม่มีค่า

ทั้งหมดของขอบเขต CSS ภาพ배경

ขอบเขต คำอธิบาย
background ตั้งค่าทั้งหมดของอุปกรณ์ภาพ배경ในคำเสรียะเดียว
background-attachment ตั้งค่าว่าภาพ배경คงที่หรือหล่อนร่วมกับส่วนอื่นของหน้าเว็บ
background-clip กำหนดพื้นที่การวาดภาพ배경
background-color ตั้งค่าสีภาพ배경ขององค์ประกอบ
background-image ตั้งค่าภาพ배경ขององค์ประกอบ
background-origin กำหนดที่ใดที่จะทำการวางภาพ배경
background-position ตั้งค่าตำแหน่งเริ่มต้นของรูปภาพพื้นหลัง
background-repeat ตั้งค่าว่าแบบรูปภาพพื้นหลังจะเริ่มต้นและจะซ้ำได้
background-size กำหนดขนาดรูปภาพพื้นหลัง