คุณสมบัติ background-origin
คุณสมบัติ background-origin ระบุตำแหน่งจุดเริ่มต้น (origin) ของภาพพื้นหลัง ว่าจะเริ่มวาดจากขอบเขตไหน
ค่าที่ใช้ได้
| ค่า | จุดเริ่มต้น (0,0) |
|---|---|
border-box | มุมขอบด้านนอก (default) |
padding-box | มุมขอบ padding |
content-box | มุมขอบเนื้อหา |
ความแตกต่างระหว่าง background-origin และ background-clip
- background-origin: กำหนด จุดเริ่มต้น ของการวาดภาพ (ตำแหน่ง 0,0)
- background-clip: กำหนด พื้นที่ตัด ว่าภาพจะแสดงได้ถึงไหน
ตัวอย่าง: content-box
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
background-origin: content-box;
}
</style>
</head>
</body>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>ภาพพื้นหลังจะเริ่มวาดจากมุมเนื้อหา ไม่ได้อยู่ใต้ padding หรือ border...</p>
</div>
</body>
</html>การใช้งานร่วมกับ background-size
.example {
background-image: url(logo.png);
background-origin: content-box;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: top right;
padding: 20px;
border: 10px solid transparent;
}ภาพจะวางที่มุมขวาบนของเนื้อหา ไม่ได้อยู่ใต้ padding 20px
