Thuộc tính background-attachment trong CSS được sử dụng để chỉ định vị trí của hình nền khi trang được cuộn theo chế độ xem. Nó có thể có các giá trị cuộn, cố định và cục bộ.
Cú pháp
Cú pháp của thuộc tính tệp đính kèm nền CSS như sau -
Selector {
background-attachment: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính tệp đính kèm nền CSS -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: local;
background-position: center;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 40px;
margin: 30px;
}
.in {
background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Khi cuộn, chúng tôi nhận được kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 5%;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 80px;
margin: 30px;
border-radius: 4%;
}
.in {
background: rgba(0,40,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Khi cuộn, chúng tôi nhận được kết quả sau -
