Cung cấp cho trang web của bạn sở thích trực quan với đồ họa nền
Hình ảnh là một phần quan trọng trong thiết kế trang web hấp dẫn. Điều này bao gồm việc sử dụng hình nền. Đây là những hình ảnh và đồ họa được sử dụng phía sau các khu vực của một trang trái với hình ảnh được trình bày như là một phần của các trang nội dung. Những hình nền này có thể thêm sở thích trực quan vào một trang và giúp bạn đạt được thiết kế trực quan mà bạn có thể đang tìm kiếm trên một trang.
Nếu bạn bắt đầu làm việc với hình nền, bạn chắc chắn sẽ chạy vào kịch bản mà bạn muốn một hình ảnh kéo dài để vừa với trang.
Điều này đặc biệt đúng đối với các trang web đáp ứng đang được phân phối tới nhiều loại thiết bị và kích thước màn hình .
Điều này mong muốn kéo dài một hình ảnh nền là một mong muốn rất phổ biến cho các nhà thiết kế web bởi vì không phải mọi hình ảnh phù hợp trong không gian của một trang web. Thay vì đặt kích thước cố định, việc kéo giãn hình ảnh cho phép nó uốn cong để vừa với trang bất kể cửa sổ trình duyệt rộng hay hẹp.
Cách tốt nhất để kéo giãn hình ảnh để vừa với nền của trang là sử dụng thuộc tính CSS3 , cho kích thước nền. Dưới đây là một ví dụ sử dụng hình nền cho nội dung trang và đặt kích thước thành 100% sao cho nó sẽ luôn kéo dài để vừa với màn hình.
thân hình {
background: url (bgimage.jpg) không lặp lại;
background-size: 100%;
}
Theo caniuse.com, thuộc tính này hoạt động trong IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ và trên tất cả các trình duyệt di động chính. Điều này bao gồm bạn cho tất cả các trình duyệt hiện đại có sẵn ngày hôm nay, có nghĩa là bạn nên sử dụng tài sản này mà không sợ rằng nó sẽ không hoạt động trên màn hình của ai đó.
Giả mạo nền kéo dài trong trình duyệt cũ hơn
Bạn không cần phải hỗ trợ bất kỳ trình duyệt nào cũ hơn IE9, nhưng hãy giả sử rằng bạn lo ngại rằng IE8 không hỗ trợ thuộc tính này. Trong trường hợp đó, bạn có thể giả mạo một nền kéo dài. Và bạn có thể sử dụng tiền tố trình duyệt cho Firefox 3.6 (-moz-background-size) và Opera 10.0 (-o-background-size).
Cách dễ nhất để giả mạo hình nền được kéo dài là kéo dài nó trên toàn bộ trang. Sau đó, bạn không kết thúc với không gian thêm hoặc phải lo lắng rằng văn bản của bạn phù hợp trong khu vực kéo dài. Dưới đây là cách thực hiện:
id = "bg" />
- Trước tiên, hãy đảm bảo rằng tất cả các trình duyệt đều có chiều cao 100%, 0 lề và 0 đệm trên các phần tử HTML BODY. Đặt phần sau vào phần đầu của tài liệu HTML của bạn:
- Thêm hình ảnh bạn muốn làm nền làm phần tử đầu tiên của trang web và đặt nó là id của "bg":
- Định vị hình nền để nó được cố định ở trên cùng và bên trái và rộng 100% và cao 100%. Thêm mục này vào biểu định kiểu của bạn:
img # bg {
vị trí: cố định;
trên cùng: 0;
trái: 0;
chiều rộng: 100%;
chiều cao: 100%;
} - Thêm tất cả nội dung của bạn vào trang bên trong phần tử DIV có id là "nội dung". Thêm DIV bên dưới hình ảnh:
Lưu ý: thật thú vị khi xem trang của bạn ngay bây giờ. Hình ảnh sẽ hiển thị bị kéo dài nhưng nội dung của bạn bị thiếu hoàn toàn. Tại sao? Vì hình nền có chiều cao 100% và phân chia nội dung sau hình ảnh trong luồng tài liệu - hầu hết các trình duyệt sẽ không hiển thị hình ảnh đó.Tất cả nội dung của bạn ở đây - bao gồm tiêu đề, đoạn văn, v.v.
- Định vị nội dung của bạn sao cho nó tương đối và có chỉ mục z là 1. Điều này sẽ đưa nó lên trên hình nền trong các trình duyệt tuân thủ tiêu chuẩn. Thêm mục này vào biểu định kiểu của bạn:
#Nội dung {
vị trí: tương đối;
z-index: 1;
}
- Nhưng bạn chưa xong. Internet Explorer 6 không tuân thủ các tiêu chuẩn và vẫn có một số vấn đề. Có rất nhiều cách để ẩn CSS khỏi mọi trình duyệt nhưng IE6, nhưng cách dễ nhất (và ít có khả năng gây ra các vấn đề khác) là sử dụng các chú thích có điều kiện. Đặt thông tin sau đây sau biểu định kiểu của bạn trong phần đầu của tài liệu:
- Bên trong chú thích được đánh dấu, thêm một bảng định kiểu khác với một số kiểu để có được IE 6 để chơi đẹp:
- Hãy chắc chắn để kiểm tra trong IE 7 và IE 8 là tốt. Bạn có thể cần điều chỉnh các bình luận để hỗ trợ chúng. Tuy nhiên, nó hoạt động khi tôi thử nghiệm nó.
OK - đây là thừa nhận WAY overkill. Rất ít trang web cần hỗ trợ IE 7 hoặc 8 nữa, ít hơn nhiều IE6!
Như vậy, cách tiếp cận này là lỗi thời và có thể không cần thiết cho bạn. Tôi để nó ở đây nhiều hơn như một mô hình tò mò về những thứ khó khăn hơn bao giờ hết trước khi tất cả các trình duyệt của chúng tôi chơi thật độc đáo với nhau!
Giả mạo một hình nền kéo dài trong một không gian nhỏ hơn
Bạn có thể sử dụng kỹ thuật tương tự để giả mạo hình nền được kéo dài trên DIV hoặc phần tử khác trên trang web của bạn. Đây là một chút phức tạp hơn khi bạn phải sử dụng định vị tuyệt đối hoặc có các vấn đề khoảng cách kỳ lạ cho các phần khác của trang.
- Đặt hình ảnh trên trang mà tôi muốn sử dụng làm nền.
- Trong bảng định kiểu, hãy đặt chiều rộng và chiều cao cho hình ảnh. Lưu ý, bạn có thể sử dụng tỷ lệ phần trăm cho chiều rộng hoặc chiều cao, nhưng tôi thấy điều chỉnh dễ dàng hơn với các giá trị độ dài cho chiều cao.
img # bg {
chiều rộng: 20em;
chiều cao: 30m;
} - Đặt nội dung của bạn vào một div có id "content" như chúng ta đã làm ở trên:
Tất cả nội dung của bạn ở đây
- Kiểu div nội dung có chiều rộng và chiều cao giống như hình nền:
div # content {
chiều rộng: 20em;
chiều cao: 30m;
} - Sau đó, đặt nội dung lên cùng chiều cao với hình ảnh. Vì vậy, nếu hình ảnh của bạn là 30em bạn sẽ có một phong cách hàng đầu: -30em; Đừng quên đặt chỉ mục z là 1 trên nội dung.
#Nội dung {
vị trí: tương đối;
trên cùng: -30em;
z-index: 1;
chiều rộng: 20em;
chiều cao: 30m;
} - Sau đó thêm vào chỉ số z -1 cho người dùng IE 6, như bạn đã làm ở trên:
Một lần nữa, với kích thước nền được hưởng sự hỗ trợ trình duyệt rộng hiện nay, cách tiếp cận này cũng rất có khả năng không cần thiết và được trình bày như một sản phẩm của một thời đại đã qua. Nếu bạn muốn sử dụng phương pháp này, chỉ cần chắc chắn kiểm tra điều này trong nhiều trình duyệt nhất có thể.
Và nếu nội dung của bạn thay đổi kích thước, bạn sẽ cần phải thay đổi kích thước của vùng chứa và hình nền của bạn, nếu không, bạn sẽ kết thúc với kết quả lạ.