CSS ภาพ배경คำเสรียะสั้น
- หน้าก่อนหน้า CSS รูปภาพพื้นหลังติด
- หน้าต่อไป 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 | กำหนดขนาดรูปภาพพื้นหลัง |
- หน้าก่อนหน้า CSS รูปภาพพื้นหลังติด
- หน้าต่อไป CSS ขอบ