Trong hướng dẫn này, chúng ta sẽ tìm hiểu kỹ thuật đơn giản nhất để làm cho hình nền trải dài hoàn toàn để bao phủ toàn bộ khung nhìn của trình duyệt. Chúng tôi sẽ sử dụng thuộc tính CSS background-size: cover;
3 để biến nó thành hiện thực; .
Ví dụ về hình nền đầy đủ đáp ứng
Việc có một bức ảnh lớn bao phủ toàn bộ nền của trang web hiện đang khá phổ biến
Dưới đây là một số trang web có hình nền đầy đủ đáp ứng.
Các khái niệm cốt lõi để tạo hình nền đáp ứng bằng CSS
Đây là kế hoạch trò chơi của chúng tôi
Sử dụng thuộc tính kích thước nền để bao phủ toàn bộ chế độ xem
Thuộc tính CSS
background-size: cover;3 có thể có giá trị là
background-size: cover;5. Giá trị
background-size: cover;5 yêu cầu trình duyệt tự động chia tỷ lệ chiều rộng và chiều cao của hình nền sao cho chúng luôn bằng hoặc lớn hơn chiều rộng/chiều cao của chế độ xem
Sử dụng truy vấn phương tiện để cung cấp hình nền nhỏ hơn cho thiết bị di động
Để cải thiện tốc độ tải trang trên màn hình nhỏ, chúng tôi sẽ sử dụng truy vấn phương tiện để cung cấp phiên bản thu nhỏ của tệp hình nền. Đây là tùy chọn
Kỹ thuật sẽ hoạt động mà không cần điều này
Nhưng tại sao việc cung cấp hình nền nhỏ hơn cho thiết bị di động lại là một ý tưởng hay? . Kích thước này sẽ được chúng tôi bao phủ trên hầu hết các màn hình máy tính màn hình rộng hiện đang được bán trên thị trường, nhưng với chi phí phục vụ tối đa 1. tệp 7MB
Tải trọng khổng lồ đó chỉ dành cho ảnh nền không bao giờ là điều tốt trong bất kỳ tình huống nào, nhưng nó đặc biệt tệ đối với kết nối internet di động
Ngoài ra, kích thước hình ảnh quá lớn trên các thiết bị màn hình nhỏ [thêm về điều này trong hướng dẫn này]
Hãy xem qua quy trình
HTML
Đây là tất cả những gì bạn cần để đánh dấu
...Your content goes here...
Chúng ta sẽ gán hình nền cho phần tử
background-size: cover;7 để hình ảnh luôn bao phủ toàn bộ khung nhìn của trình duyệt. Tuy nhiên, kỹ thuật này cũng sẽ hoạt động trên bất kỳ phần tử cấp khối nào [chẳng hạn như
background-size: cover;8 hoặc
background-size: cover;0]. Nếu chiều rộng và chiều cao của vùng chứa cấp khối của bạn là linh hoạt, thì hình nền sẽ luôn chia tỷ lệ để bao phủ toàn bộ vùng chứa
CSS
Chúng tôi khai báo một quy tắc kiểu cho phần tử
background-size: cover;7 như vậy. nội dung {/* Vị trí của hình ảnh */ hình nền. url[hình ảnh/hình nền. jpg]; . trung tâm trung tâm; . không lặp lại; . đã sửa; . trải ra; . #464646;
background-size: cover;
Đó là nơi phép màu xảy ra
Cặp thuộc tính/giá trị này yêu cầu trình duyệt chia tỷ lệ hình nền theo tỷ lệ sao cho chiều rộng và chiều cao của nó bằng hoặc lớn hơn chiều rộng/chiều cao của phần tử. [Trong trường hợp của chúng ta, đó là phần tử
background-size: cover;7. ]
Tuy nhiên, đã xảy ra sự cố với cặp thuộc tính/giá trị này. Nếu hình nền nhỏ hơn kích thước của phần tử
background-size: cover;7 — điều này sẽ xảy ra trên màn hình có độ phân giải cao và/hoặc khi bạn có nhiều nội dung trên trang — thì trình duyệt sẽ phóng to hình ảnh theo chương trình. Và, như chúng ta đều biết, khi chúng ta phóng to hình ảnh từ kích thước tự nhiên của nó, chất lượng hình ảnh sẽ giảm [nói cách khác, hiện tượng pixel hóa xảy ra]
Để hình nền luôn được căn giữa trong viewport ta khai báo
background-position: center center;
Ở trên đặt trục tỷ lệ ở trung tâm của chế độ xem. Tiếp theo, chúng ta cần xử lý tình huống chiều cao của nội dung lớn hơn chiều cao của khung nhìn hiển thị. Khi điều này xảy ra, một thanh cuộn sẽ xuất hiện
Điều chúng tôi muốn làm là đảm bảo rằng hình nền vẫn ở nguyên vị trí ngay cả khi người dùng cuộn xuống, nếu không, chúng tôi sẽ hết hình ảnh ở dưới cùng hoặc nền sẽ di chuyển khi người dùng cuộn xuống [có thể là . Để làm điều này, chúng tôi đặt thuộc tính
background-size: cover;4 thành
background-size: cover;5
background-attachment: fixed;
Trong bản demo, tôi đã bao gồm tính năng “tải một số nội dung” để bạn có thể thấy hành vi cuộn khi
background-size: cover;4 là
background-size: cover;5. Một điều bạn có thể làm là tải xuống bản trình diễn và sau đó thử với các giá trị thuộc tính vị trí [e. g
background-size: cover;4 và
background-size: cover;9] để xem nó ảnh hưởng như thế nào đến hành vi cuộn trang và hình nền. Các giá trị thuộc tính khác khá dễ hiểu
Ký hiệu CSS tốc ký
Tôi đã viết đầy đủ các thuộc tính nền để làm cho CSS dễ mô tả hơn
Ký hiệu CSS tốc ký tương đương cho phần trên là. cơ thể { nền. url[nền-ảnh. jpg] trung tâm bìa trung tâm cố định không lặp lại;
Không bắt buộc. Truy vấn phương tiện cho màn hình nhỏ
Đối với màn hình nhỏ, tôi đã sử dụng Photoshop để thay đổi kích thước hình nền ban đầu theo tỷ lệ xuống 768x505px và tôi cũng chạy nó qua Smush. nó để cắt thêm một vài byte. Làm điều này đã giảm kích thước tệp xuống từ 1741KB xuống 114KB. Đó là giảm 93% kích thước tệp
Xin đừng hiểu sai ý tôi, 114KB vẫn còn khá lớn đối với thành phần thẩm mỹ thuần túy của một thiết kế. Đối với tải trọng 114KB, thông thường tôi sẽ chỉ yêu cầu người dùng sử dụng nếu tệp có khả năng bổ sung cải thiện đáng kể về trải nghiệm người dùng, do phải đánh đổi hiệu suất web trên thiết bị di động rất lớn. Đây là truy vấn phương tiện. màn hình chỉ @media và [chiều rộng tối đa. 767px] { body {/* Kích thước tệp của hình nền này nhỏ hơn 93% để cải thiện tốc độ tải trang trên kết nối internet di động */ background-image. url[hình ảnh/nền-ảnh-thiết bị di động. jpg];
Nhược điểm của việc sử dụng truy vấn phương tiện ở trên là nếu bạn thay đổi kích thước cửa sổ trình duyệt của mình, chẳng hạn như chiều rộng 1200px xuống chiều rộng 640px [hoặc ngược lại], bạn sẽ thấy nhấp nháy trong giây lát khi hình nền nhỏ hơn hoặc lớn hơn tải lên. Ngoài ra, do một số thiết bị nhỏ có thể hiển thị nhiều pixel hơn — ví dụ: iPhone 5 với màn hình retina có thể hiển thị 1136x640 pixel — hình nền nhỏ hơn sẽ được tạo thành pixel
Tạo hình nền đáp ứng đầu tiên của bạn bằng CSS
Bạn có thể lấy mã nguồn mới nhất của hướng dẫn này từ GitHub. Nếu tôi có thể nói một điều cảnh báo về kỹ thuật này, thì đó là. Vui lòng sử dụng cẩn thận vì các tệp lớn có thể ảnh hưởng nghiêm trọng đến UX, đặc biệt khi người dùng của chúng tôi không có kết nối Internet nhanh hoặc đáng tin cậy
Đây cũng là lý do tại sao bạn nên đặt màu nền mặc định tốt để người dùng có thể đọc nội dung trong khi hình nền đang tải. Tối ưu hóa các hình ảnh trên Web của bạn trước khi đưa chúng vào sản xuất cũng không phải là một ý kiến tồi;
- Hướng dẫn lưu hình ảnh cho web
- Công cụ tối ưu hóa hình ảnh của bạn
- Hướng dẫn khóa học về sự cố trên JPEG
- Thủ thuật tối ưu hóa hình ảnh nâng cao
Giấy phép. Cống hiến miền công cộng
Không cần xin phép nếu bạn muốn sử dụng mã nguồn có trong hướng dẫn này; . 0 Phổ thông. Mã nguồn trong repo GitHub của tôi không có bất kỳ giới hạn bản quyền nào
Bạn có thể sử dụng, bán, sửa đổi và phân phối mã nguồn mà không cần xin phép, cung cấp ghi công hoặc bất kỳ yêu cầu nào khác. [Tôi không sở hữu hình nền, nó từ Unsplash. ]
Nội dung liên quan
- Hiểu các yếu tố của thiết kế web đáp ứng
- 8 cách để thêm menu điều hướng đáp ứng trên trang web của bạn
- So sánh các phương pháp xây dựng trang web được tối ưu hóa cho thiết bị di động
Trang web của bạn SEO như thế nào?
Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây
Nhận điểm SEO của bạnTài nguyên liên quan
- Bạn cũng có thể thích
- Dịch vụ của chúng tôi
- Tài nguyên theo ngành
- Kiểu chữ CSS. Những thứ cơ bản
- Nắm bắt và sử dụng CSS3 một cách thực tế
- Bạn có đang sử dụng CSS3 đúng cách không?
- 5 thư viện hiệu ứng CSS để nâng cấp thiết kế của bạn
- Tổng quan nhanh về CSS calc[]
- Cách tạo các nút CSS Ghost
- Hướng dẫn về màu CSS RGBA
- Tạo hình ảnh đáp ứng bằng CSS
- Thuộc tính tốc ký nền CSS
- Dịch vụ thiết kế website
- Cơ quan thiết kế web
- Giá thiết kế web
- Một trang web nên có giá bao nhiêu vào năm 2022?
- Dịch vụ thiết kế blog từng đoạt giải thưởng. Nâng cấp Blog của bạn
- Xây dựng trang web của bạn với một công ty thiết kế web tùy chỉnh đáng tin cậy
- Dịch vụ phát triển trang web thương mại điện tử
- Đại lý thiết kế web B2B
- Thiết kế web dựa trên cơ sở dữ liệu
- Thiết kế web cho công ty khai quật. 5 mẹo hàng đầu [Có ví dụ. ]
- 5 mẹo thiết kế web cho người cài đặt hàng rào
- 5 mẹo thiết kế web đơn giản và thành công cho các nhà bán lẻ phụ tùng ô tô
- Lời khuyên cho thiết kế trang web y tế
- Thiết kế trang web y tế từ một cơ quan giành giải thưởng
- Top 10 mẹo thiết kế web hiệu quả cho trung tâm dịch vụ ô tô
- Thiết Kế Web Năng Lượng Tái Tạo. Mẹo cho một trang web tỏa sáng
- Dịch Vụ Thiết Kế Website Bảo Hiểm
- 5 mẹo thiết kế web cho các phòng khám hiếm muộn
Trang web của bạn SEO như thế nào?
Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây
Nhận điểm SEO của bạnTuyển dụng WebFX
Tham gia sứ mệnh của chúng tôi để cung cấp các dịch vụ tiếp thị kỹ thuật số hàng đầu trong ngành cho các doanh nghiệp trên toàn cầu - đồng thời xây dựng kiến thức cá nhân của bạn và phát triển với tư cách cá nhân