Thuộc tính nền được sử dụng để thiết lập hoặc lấy hình nền được liên kết với một phần tử. Nó là một thuộc tính tốc ký và có thể thao tác tối đa 8 thuộc tính.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính nền -
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
Giá trị
Sau đây là các giá trị -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | color Để thiết lập màu nền của phần tử. |
| 2 | hình ảnh Để thiết lập hình nền phần tử. |
| 3 | lặp lại Để thiết lập hình ảnh nền sẽ được lặp lại như thế nào. |
| 4 | tệp đính kèm Để thiết lập hình nền cố định hoặc cuộn với trang. |
| 5 | vị trí Để thiết lập vị trí bắt đầu hình nền. |
| 6 | kích thước Để thiết lập kích thước hình nền. |
| 7 | origin Để xác định khu vực định vị nền. |
| 8 | clip Để thiết lập ảnh nền được vẽ bao xa. |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính nền -
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</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 hình ảnh THAY ĐỔI NỀN TẢNG -
