ค่า CSS padding-box ใน background-origin

ใช้คุณสมบัติ CSS background-origin กำหนดค่า padding-box ด้วยค่านี้ รูปภาพพื้นหลังจะเริ่มจากมุมซ้ายบนของขอบ padding

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อเปรียบเทียบ padding-box, border-box, content-box:

<!DOCTYPE html>
<html>
<head>
  <style>
    #value1 {
      border: 3px solid blue;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: padding-box;
    }
    #value2 {
      border: 3px solid orange;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: border-box;
    }
    #value3 {
      border: 3px dashed yellow;
      padding: 30px;
      background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
      background-repeat: no-repeat;
      background-origin: content-box;
    }
  </style>
</head>
<body>
  <h1>padding-box value</h1>
  <div id="value1">
    <h2>Heading 2</h2>
    <p>This is demo text...</p>
    <h3>Heading 3</h3>
    <p>This is demo text...</p>
  </div>
  <h1>border-box value</h1>
  <div id="value2">
    <h2>Heading 2</h2>
    <p>This is demo text...</p>
    <h3>Heading 3</h3>
    <p>This is demo text...</p>
  </div>
  <h1>content-box value</h1>
  <div id="value3">
    <h2>Heading 2</h2>
    <p>This is demo text...</p>
    <h3>Heading 3</h3>
    <p>This is demo text...</p>
  </div>
</body>
</html>

ความแตกต่าง:

• padding-box: รูปเริ่มจากขอบ padding (ภายใน border)
• border-box: รูปเริ่มจากขอบ border (ขอบนอกสุด)
• content-box: รูปเริ่มจากขอบ content (ภายใน padding)