Cafedev chia sẻ về background-attachment, cách viết nhanh gọn và một số thuộc tính background khác trong CSS cũng rất hưu ích cho ace khi làm việc với background.
Nội dung chính
1. background-attachment
Thuộc tính background-attachment xác định xem hình nền sẽ cuộn hay được sửa (sẽ không cuộn với phần còn lại của trang):
Ví dụ: Chỉ định rằng hình nền phải được sửa:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Ví dụ: Chỉ định rằng hình nền sẽ cuộn với phần còn lại của trang:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
<p>The background-image scrolls. Try to scroll down the page.</p>
</body>
</html>2. Viết nhanh gọn với background
Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là một thuộc tính shorthand.
Thay vì viết:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Bạn có thể sử dụng nền thuộc tính tốc ký(shorthand property) background:
Ví dụ: Sử dụng thuộc tính tốc ký để đặt thuộc tính nền trong một khai báo:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Lưu ý: Khi sử dụng thuộc tính tốc ký, thứ tự của các giá trị thuộc tính là:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Không có vấn đề gì nếu một trong các giá trị thuộc tính bị thiếu, miễn là các giá trị khác theo thứ tự này. Lưu ý rằng chúng tôi không sử dụng thuộc tính đính kèm nền trong các ví dụ ở trên, vì nó không có giá trị.
3. Tất cả các thuộc tính nền CSS
| Thuộc tính | Mô tả |
|---|---|
| background | Đặt tất cả các thuộc tính nền trong một khai báo |
| background-attachment. | Đặt xem hình nền có cố định hay cuộn với phần còn lại của trang |
| background-clip | Chỉ định vùng vẽ của nền |
| background-color | Đặt màu nền của một phần tử |
| background-image | Đặt hình nền cho một phần tử |
| background-origin | Chỉ định vị trí (các) hình nền được định vị |
| background-position | Đặt vị trí bắt đầu của ảnh nền |
| background-repeat | Đặt cách lặp lại một hình ảnh nền |
| background-size | Chỉ định kích thước của hình ảnh nền |
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
