Thuộc tính background-origin được sử dụng để đặt hoặc lấy nguồn gốc, tức là vị trí tương đối của nó. Nó có thể liên quan đến bất kỳ khu vực nào trong số bốn khu vực mô hình hộp.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính backgroundOrigin -
object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"
Giá trị
Các giá trị thuộc tính trên được giải thích như sau -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | hộp đệm Để đặt hình nền so với hộp đệm. Nó là giá trị mặc định. Giá trị mặc định. Hình nền được đặt so với hộp đệm. |
| 2 | hộp viền Để đặt hình nền so với hộp viền. |
| 3 | hộp nội dung Để đặt hình nền so với hộp nội dung. |
| 4 | tên đầu tiên Để đặt thuộc tính này thành giá trị ban đầu. |
| 5 | kế thừa Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính backgroundOrigin -
<!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;
}
div>p {
box-shadow: 0 0 5px darkgrey;
}
</style>
<script>
function changeBackOrigin(){
document.getElementById("DIV1").style.backgroundOrigin="padding-box";
document.getElementById("Sample").innerHTML="The background origin is now set to to padding-box";
}
</script>
</head>
<body>
<h2>PowerBI Tutorial</h2>
<div id="DIV1">
<p>Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn PowerBI...Learn
PowerBI...Learn PowerBI...Learn PowerBI... Learn PowerBI...Learn PowerBI...</p>
</div>
<p>Change the above div background origin by clicking the below button</p>
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI NGUỒN GỐC -
