Làm thế nào để tôi phù hợp với một hình nền đầy đủ trong css?

Hình ảnh là một phần quan trọng của thiết kế trang web hấp dẫn. Họ thêm sự quan tâm trực quan vào một trang và giúp bạn đạt được thiết kế mà bạn đang tìm kiếm. Khi bạn làm việc với hình nền, bạn có thể muốn hình ảnh kéo dài để vừa với trang mặc dù có nhiều loại thiết bị và kích cỡ màn hình

Cách tốt nhất để kéo dài hình ảnh cho vừa với nền của một phần tử là sử dụng thuộc tính CSS3, cho kích thước nền và đặt nó bằng cover

div {
 background-image: url['background.jpg'];
 background-size: cover;
 background-repeat: no-repeat;
}

Hãy xem ví dụ này trong hành động. Đây là HTML trong hình bên dưới

Bây giờ, hãy xem CSS. Nó không khác nhiều so với mã ở trên. Có một vài bổ sung để làm cho nó rõ ràng hơn

Bây giờ, đây là kết quả trên toàn màn hình

Bằng cách đặt kích thước nền thành che phủ, bạn đảm bảo rằng các trình duyệt sẽ tự động chia tỷ lệ hình nền, cho dù lớn đến đâu, để bao phủ toàn bộ khu vực của phần tử HTML mà nó được áp dụng cho. Hãy nhìn vào một cửa sổ hẹp hơn

Theo caniuse. com, phương pháp này được hơn 90 phần trăm trình duyệt hỗ trợ, khiến nó trở thành lựa chọn hiển nhiên trong hầu hết các tình huống. Nó tạo ra một số vấn đề với trình duyệt của Microsoft, do đó, có thể cần phải dự phòng

Con đường dự phòng

Dưới đây là một ví dụ sử dụng hình nền cho nội dung của trang và đặt kích thước thành 100% để nó luôn kéo dài vừa với màn hình. Phương pháp này không hoàn hảo và có thể gây ra một số khoảng trống, nhưng bằng cách sử dụng thuộc tính vị trí nền, bạn sẽ có thể loại bỏ sự cố và vẫn hỗ trợ các trình duyệt cũ hơn

body {
 background: url['bgimage.jpg'];
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: center;
} 

Thay vào đó, sử dụng ví dụ ở trên với kích thước nền được đặt thành 100%, bạn có thể thấy rằng CSS hầu như giống nhau

Kết quả trên trình duyệt toàn màn hình hoặc trình duyệt có kích thước tương tự với hình ảnh gần như giống hệt nhau. Tuy nhiên, với màn hình hẹp hơn, các khuyết điểm bắt đầu lộ ra

Rõ ràng, nó không phải là lý tưởng, nhưng nó sẽ hoạt động như một phương án dự phòng

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 tất cả các trình duyệt hiện đại hiện có cho bạn, điều đó có nghĩa là bạn nên sử dụng thuộc tính 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ữa hai phương pháp này, bạn sẽ không gặp khó khăn gì khi hỗ trợ gần như tất cả các trình duyệt. Như kích thước nền. cover thậm chí còn được chấp nhận nhiều hơn giữa các trình duyệt, thậm chí dự phòng này sẽ trở nên không cần thiết. Rõ ràng, CSS3 và các phương pháp thiết kế đáp ứng hơn đã đơn giản hóa và sắp xếp hợp lý bằng cách sử dụng hình ảnh làm nền thích ứng trong các phần tử HTML

Trích dẫn bài viết này

Định dạng

trích dẫn của bạn

Kyrnin, Jennifer. "Làm thế nào để kéo dài một hình nền để phù hợp với một trang web. "ThinkCo. https. //www. suy nghĩ. com/stretch-background-image-3466979 [truy cập ngày 22 tháng 12 năm 2022]