Thuộc tính backgroundPosition được sử dụng để thiết lập hoặc lấy vị trí ban đầu cho hình nền của một phần tử liên quan đến nguồn gốc.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính backgroundPosition -
object.style.backgroundPosition = value
Giá trị
Sau đây là các giá trị -
| Giá trị | Mô tả |
|---|---|
| trên cùng bên trái trung tâm hàng đầu trên cùng bên phải chính giữa bên trái trung tâm trung tâm chính giữa bên phải dưới cùng bên trái dưới cùng giữa dưới cùng bên phải | Vị trí có thể được hiểu theo tên của chúng. Nếu bạn chỉ viết một giá trị thì giá trị kia sẽ luôn ở giữa. |
| xpos ypos | Để biểu thị vị trí ngang (x) và dọc (y). Nó bắt đầu từ góc trên bên trái với 0,0. Pixel được ưu tiên làm đơn vị mặc dù bạn cũng có thể sử dụng bất kỳ đơn vị CSS nào khác. |
| x% y% | Để chỉ định vị trí ở vị trí ngang (x) và dọc (y) theo tỷ lệ phần trăm. Nó bắt đầu từ trên cùng bên trái với 0% 0% và với cornet dưới cùng bên phải là 100% 100%. Vì chỉ định một giá trị có nghĩa là giá trị kia sẽ ở giữa, tức là nó sẽ ở mức 50%. |
| ban đầu | Để đặt thuộc tính này thành giá trị ban đầu. |
| kế thừa | Để kế thừa giá trị thuộc tính mẹ. |
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho Thuộc tính backgroundPosition -
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</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 VỊ TRÍ -
