Ngày nay, các trang web có hình nền đáp ứng đang có nhu cầu. Các trang web đáp ứng cung cấp cho người dùng trải nghiệm người dùng lý tưởng trên hầu hết tất cả các thiết bị bao gồm điện thoại di động, máy tính bảng hoặc máy tính để bàn. Hình ảnh đáp ứng có thể điều chỉnh nền của trang web, kích thước màn hình và kích thước. Hình ảnh đáp ứng đảm bảo duy trì chất lượng và tỷ lệ. Ngoài ra, trang web có hình nền phản hồi tải nhanh chóng.
Hướng dẫn này sẽ cung cấp hướng dẫn để điều chỉnh hình nền phù hợp với kích thước màn hình.
Làm cách nào để điều chỉnh hình nền theo kích thước màn hình?
Hình ảnh có thể thích ứng với kích thước màn hình bằng cách thực hiện theo các hướng dẫn từng bước bên dưới.
Bước 1: Tạo cấu trúc HTML
Đầu tiên, tạo cấu trúc HTML và thêm biểu định kiểu bên ngoài bằng cách sử dụng
< html >
< cái đầu >
< liên kết rel = 'bản định kiểu' href = 'style.css' >
< tiêu đề > Hình nền đáp ứng tiêu đề >
cái đầu >
< thân hình >
-- Khu vực thêm các nội dung khác-- >
thân hình >
html >
Bước 2: Áp dụng CSS
Bây giờ, hãy áp dụng CSS cho “ thân hình ' phần. Đầu tiên, chỉ định hình nền. Với mục đích đó, hãy sử dụng “ hình nền ” và chỉ định “ url() ” giá trị chứa địa chỉ tệp hình ảnh.
Sau đó, sử dụng “ hình nền ” để chỉ định kích thước hình ảnh, “ Bối cảnh Lặp lại ” thuộc tính để đặt độ lặp lại của hình ảnh và “ đính kèm nền ” để đặt xem hình ảnh có cuộn theo phần còn lại của trang hay không. Cuối cùng, đặt “ lề ' Và ' phần đệm ' ĐẾN ' 0 ”:
thân hình {hình nền: url ( 'test-image.jpg' ) ;
kích thước nền: 100 % 100 % ;
/* Chia tỷ lệ hình ảnh thành 100 % chiều rộng và 100 % chiều cao */
lặp lại nền: không lặp lại;
phần đính kèm nền: đã sửa;
lề: 0 ;
phần đệm: 0 ;
/* Tùy chọn: Nền cố định */
}
đầu ra
Đây là đầu ra trước khi thu gọn cửa sổ trình duyệt:
Sau khi thu gọn trình duyệt:
Kết quả đầu ra ở trên xác nhận rằng hình ảnh đã điều chỉnh nền phù hợp với kích thước màn hình.
Phần kết luận
Để điều chỉnh hình nền cho phù hợp với kích thước màn hình, trước tiên hãy thêm “ khung nhìn ” trong phần đầu để kiểm soát kích thước và tỷ lệ. Sau đó, tạo cấu trúc HTML và áp dụng CSS. Trong CSS, đặt “ kích thước nền ” giá trị tài sản cho “ che phủ ” giá trị để chia tỷ lệ chiều cao và chiều rộng của hình ảnh. Bài viết này đã trình bày một hướng dẫn đầy đủ để điều chỉnh hình nền theo kích thước màn hình.