Thuộc tính backgroundOrigin xác định vùng gốc (origin) để định vị hình nền, tương ứng với ba hộp của box model: content-box, padding-box, border-box.
Cú pháp
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| padding-box | Vị trí tương đối với padding box (mặc định). |
| border-box | Vị trí tương đối với border box (kể cả viền). |
| content-box | Vị trí tương đối với content box (bên trong padding). |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Thay đổi origin hình nền div:
<!DOCTYPE html> <html> <head> <style>
#DIV1 {
margin: 20px;
box-shadow: 0 0 5px black;
padding: 30px;
background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
font-size: 24px;
}
</style>
<script>
function changeBackOrigin(){
document.getElementById("DIV1").style.backgroundOrigin = "padding-box";
document.getElementById("Sample").innerHTML = "Background origin giờ là padding-box";
}
</script> </head>
<body>
<h2>Hướng dẫn PowerBI</h2>
<div id="DIV1">
<p>Learn PowerBI... (văn bản dài)</p>
</div>
<p>Nhấn nút để thay đổi background origin</p>
<button onclick="changeBackOrigin()">THAY ĐỔI ORIGIN</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Ban đầu origin = content-box (hình nền bắt đầu sau padding):
Sau khi nhấn nút, origin = padding-box (hình nền lùi ra bao gồm padding):
