Khả năng kéo dài hình nền đến toàn bộ chiều rộng của cửa sổ trình duyệt bằng cách sử dụng CSS chỉ xuất hiện khi phát hành thông số kỹ thuật mới nhất của nó - CSS3. Thật không may, cho đến nay một số lượng lớn người lướt web đang sử dụng các trình duyệt đầu tiên không hiểu đặc tả CSS3. Do đó, bạn phải đưa ra lựa chọn - hoặc sử dụng giải pháp ít tiện lợi hơn nhưng có nhiều trình duyệt, hoặc công nghệ cao nhưng dành cho đối tượng hạn chế. Hãy xem xét cả hai lựa chọn.
Cần thiết
Kiến thức cơ bản về HTML và CSS
Hướng dẫn
Bước 1
Tùy chọn đầu tiên dựa trên các thông số kỹ thuật trước đó của ngôn ngữ CSS. Bạn cần tạo một cấu trúc mã HTML có hai lớp chồng lên nhau, lớp này ở trên lớp kia. Các lớp (div) có thể được kéo dài theo chiều rộng của màn hình trong đặc tả ngôn ngữ mô tả kiểu xếp tầng cũ. Ở dưới cùng của các lớp, bạn cần đặt hình nền và ở trên cùng sẽ đặt tất cả nội dung của trang. Cấu trúc như vậy trong phần nội dung của tài liệu có thể trông như thế này:
Đây sẽ là nội dung của trang
Và phần mô tả các kiểu cho cấu trúc này nên được đặt trong phần tiêu đề. Ví dụ, điều này:
html, nội dung {
lề: 0px;
chiều cao: 100%;
}
#lai lịch {
vị trí: tuyệt đối;
chiều rộng: 100%;
chiều cao: 100%;
}
#thân hình {
vị trí: tuyệt đối;
chiều rộng: 100%;
chiều cao: 100%;
chỉ số z: 2;
}
Ở đây, các lớp có nền ID (đây là hình nền của bạn) và nội dung (đây là lớp cho nội dung trang) được đặt ở vị trí tuyệt đối và 100% chiều rộng và chiều cao. Ngoài ra, lớp nội dung được gán một số thứ tự z-index = 2. Nó xác định "độ sâu" của các lớp - nó càng lớn thì lớp này nằm càng xa "đáy". Trong trường hợp của chúng tôi, nó sẽ nằm trên lớp nền, sử dụng chỉ mục z mặc định.
Bước 2
Mã hoàn chỉnh có thể trông như thế này:
html, nội dung {
lề: 0px;
chiều cao: 100%;
}
#lai lịch {
vị trí: tuyệt đối;
chiều rộng: 100%;
chiều cao: 100%;
}
#thân hình {
vị trí: tuyệt đối;
chiều rộng: 100%;
chiều cao: 100%;
chỉ số z: 2;
}
Đây sẽ là nội dung của trang
Đừng quên thay thế tên tệp ảnh nền fon.png.
Bước 3
Tùy chọn thứ hai sẽ sử dụng thuộc tính kích thước nền được giới thiệu trong CSS3. Đồng thời, thêm các thuộc tính tương tự vào các định nghĩa kiểu đã được sử dụng trước đây trên các trình duyệt Mozilla Firefox, Google Chrome và Opera. Khối mô tả kiểu trong phiên bản này có thể trông giống như sau:
html {
background: url (fon.png) trung tâm không lặp lại cố định;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: bìa;
}
Và ở đây đừng quên thay thế tên tệp ảnh nền là fon.png. Và trong nội dung của chính tài liệu, không có cấu trúc đặc biệt nào được yêu cầu trong phiên bản này.
