คุณสมบัติ background-origin

คุณสมบัติ background-origin กำหนด ว่ารูปภาพพื้นหลัง (เฉพาะรูปภาพเท่านั้น ไม่ใช่การเติมสีพื้นหลัง) จะถูกจัดวางสัมพันธ์กับ องค์ประกอบอย่างไร: ส่วนหนึ่งของรูปภาพพื้นหลังจะล้ำเข้าไป ใต้เส้นขอบ, พื้นหลังจะไม่ล้ำเข้าไปใต้เส้นขอบ หรือพื้นหลังจะถูกจัดวางเฉพาะเหนือเนื้อหาของ องค์ประกอบเท่านั้น (นั่นคือ padding จะผลักพื้นหลังให้ห่างออกไป)

ไวยากรณ์

cssตัวเลือก {
  background-origin: padding-box | border-box | content-box;
}

ค่า

ค่าเริ่มต้น: padding-box

หมายเหตุ

คุณสมบัติ background-origin จะไม่ทำงาน เมื่อ background-attachment มีค่าเป็น fixed และเมื่อ background-repeat มีค่าเป็น repeat คุณสมบัติ background-origin จะทำงานเสมอ เหมือนกับค่าที่เป็น border-box

ตัวอย่าง . ค่าเริ่มต้น

โดยค่าเริ่มต้น พื้นหลังจะไม่ล้ำเข้าไปใต้เส้นขอบ:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ตัวอย่าง . ค่า border-box

ตอนนี้พื้นหลังจะล้ำเข้าไปใต้เส้นขอบ:

html<div id="elem"></div>

css#elem {
  background-origin: border-box;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ตัวอย่าง . ค่า content-box

และตอนนี้พื้นหลังจะถูกผลักให้ห่างออกไปด้วย padding:

html<div id="elem"></div>

css#elem {
  background-origin: content-box;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  border: 10px dashed black;
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

ตัวอย่าง . เมื่อ background-repeat: repeat

เมื่อ background-repeat มีค่าเป็น repeat คุณสมบัติ background-origin จะทำงานเสมอ เหมือนกับค่าที่เป็น border-box นั่นคือพื้นหลัง จะล้ำเข้าไปใต้เส้นขอบเสมอ:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat;
  background-image: url("bg.png");
  border: 10px dashed black;
  padding: 30px;
  width: 350px;
  height: 300px;
}

Результат:

ดูเพิ่มเติม