CSS background-attachment property là gì ?

Posted by Lập Trình Viên CSS 9 phút đọc

CSS background-attachment property được sử dụng để chỉ định rằng hình nền có thể cố định hoặc cuộn với phần còn lại của trang trong cửa sổ trình duyệt. Thuộc tính này có ba giá trị scroll, fixed và local. Giá trị mặc định của nó là scroll, khiến cho phần tử không cuộn theo nội dung của nó. Giá trị local sẽ khiến phần tử cuộn theo nội dung của nó. Nếu chúng ta đặt giá trị là fixed, hình nền sẽ không di chuyển trong quá trình cuộn trang.

Thuộc tính CSS này có thể hỗ trợ nhiều hình ảnh nền khác nhau. Chúng ta có thể chỉ định một giá trị khác nhau của thuộc tính background-attachment cho từng hình ảnh nền, được phân tách bằng dấu phẩy. Mỗi hình ảnh sẽ phù hợp với giá trị tương ứng của thuộc tính này.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS background-attachment property là gì?

Thuộc tính CSS background-attachment được sử dụng để xác định cách hiển thị hình nền trên trang web. Nó cho phép bạn cố định, cuộn hoặc phù hợp với nội dung. Khi bạn đặt giá trị fixed, hình ảnh nền sẽ không di chuyển khi bạn cuộn trang. Khi bạn đặt giá trị scroll, hình ảnh nền sẽ cuộn theo nội dung khi bạn cuộn trang.

Thuộc tính CSS background-attachment được sử dụng bởi những người thiết kế web và những người quản trị trang web để xác định cách hiển thị hình nền cho trang web của họ.

Hướng dẫn CSS background-attachment property

Cú pháp của thuộc tính này được định nghĩa như sau:

background-attachment: scroll|fixed|local|initial|inherit;
  • scroll: Giá trị mặc định, phần tử không cuộn theo nội dung của nó, nhưng cuộn theo trang.
  • fixed: Hình nền bị khóa ở một vị trí cố định, ngay cả khi phần còn lại của tài liệu cuộn.
  • local: Nếu phần tử có cơ chế cuộn, hình nền sẽ cuộn với nội dung của phần tử đó.
  • initial: Đặt thuộc tính về giá trị mặc định.
  • inherit: Kế thừa giá trị từ phần tử cha.

Ví dụ sử dụng thuộc tính scroll:

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image:  url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;	
background-repeat: no-repeat;
background-attachment: scroll;
}

</style>
</head>

<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the Laptrinhvien.org. This site is developed so that students may learn computer science related technologies easily. The Laptrinhvien.org is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

Ví dụ sử dụng thuộc tính fixed:

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image:  url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;	
background-repeat: no-repeat;
background-attachment: fixed;
}

</style>
</head>

<body>
<h1> background-attachment: fixed;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the Laptrinhvien.org. This site is developed so that students may learn computer science related technologies easily. The Laptrinhvien.org is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

Ví dụ sử dụng thuộc tính local:

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image:  url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;	
background-repeat: no-repeat;
background-attachment: local;
}

</style>
</head>

<body>
<h1> background-attachment: local;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
<p>
Hi, Welcome to the Laptrinhvien.org. This site is developed so that students may learn computer science related technologies easily. The Laptrinhvien.org is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</div>

</body>
</html>

Cuối cùng, với CSS background-attachment property chúng tôi sử dụng 2 hình ảnh làm background. Hình ảnh đầu tiên sử dụng thuộc tính fixed và hình ảnh thứ 2 sử dụng thuộc tính scroll.

<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>

<style>
#example {
background-image:  url("jtp.png"), url("forest.jpg");
height: 500px;
border: 4px solid red;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed, scroll;
}

</style>
</head>

<body>
<h1> background-attachment: scroll;</h1>
<p> If there is no scrollbar on your screen, then try to resize the browser's window to see the effect. </p>
<div id="example">
</div>
</body>
</html>

Ưu và Nhược điểm CSS background-attachment property

Ưu điểm:

  • Cho phép bạn tùy chỉnh cách hiển thị hình nền theo ý muốn.
  • Hỗ trợ nhiều hình ảnh nền khác nhau.
  • Đơn giản và dễ sử dụng.

Nhược điểm:

  • Không thể hoạt động trên tất cả các trình duyệt web.
  • Có thể ảnh hưởng đến tốc độ tải trang web.

Lời khuyên CSS background-attachment property

Thuộc tính CSS background-attachment rất hữu ích cho việc tạo hiệu ứng trang web sống động. Tuy nhiên, bạn cần phải cân nhắc khi sử dụng nhiều hình ảnh nền trên cùng một phần tử, vì điều này có thể ảnh hưởng đến tốc độ tải trang. Nếu bạn muốn sử dụng nhiều hình ảnh nền, hãy chọn những hình ảnh kích thước nhỏ và tối ưu hóa để trang web của bạn không bị ảnh hưởng.

Background-attachment property hoạt động như thế nào?

Background-attachment property được sử dụng để xác định cách hiển thị hình nền trên trang web. Nó cho phép bạn cố định, cuộn hoặc phù hợp với nội dung.

Làm thế nào để chỉ định giá trị cho background-attachment property?

Bạn có thể đặt giá trị cho thuộc tính này bằng cú pháp sau: background-attachment: scroll|fixed|local|initial|inherit;

Background-attachment property có thể hỗ trợ nhiều hình ảnh nền khác nhau không?

Có, background-attachment property có thể hỗ trợ nhiều hình ảnh nền khác nhau.

Khi nào nên sử dụng fixed giá trị của background-attachment property?

Nên sử dụng giá trị fixed khi bạn muốn hình ảnh nền không di chuyển khi cuộn trang.

Có những điều cần lưu ý khi sử dụng background-attachment property không?

Bạn cần cân nhắc khi sử dụng nhiều hình ảnh nền trên cùng một phần tử để tránh ảnh hưởng đến tốc độ tải trang.