Cách tạo: Hình nền trang toàn bộ

Học cách sử dụng CSS để tạo hình nền trang toàn bộ.

Hình nền trang toàn bộ

Học cách tạo hình nền trang che盖 toàn bộ cửa sổ trình duyệt. Ví dụ sau đây hiển thị hình nền响应 theo kích thước màn hình toàn bộ (và bán phần):

Giả lập - Hình nền trang toàn bộ

Giả lập - Hình nền trang bán phần

Cách tạo hình ảnh toàn cao

Sử dụng một phần tử chứa và thêm một hình nền có độ cao 100% vào phần tử đó.

Gợi ý:Sử dụng 50% có thể tạo hình nền trang bán phần. Sau đó sử dụng các thuộc tính nền sau để căn giữa và phóng to ảnh hoàn hảo:

Lưu ý:Để đảm bảo hình ảnh che盖 toàn bộ màn hình, bạn cũng cần thiết lập height: 100% ứng dụng cùng nhau <html> và <body>:

Hình nền trang toàn bộ:

body, html {
  height: 100%;
}
.bg {
  /* Ảnh được sử dụng */
  background-image: url("dancer.jpg");
  /* Cao độ toàn bộ */
  height: 100%;
  /* Tốt đẹp để căn giữa và phóng to ảnh */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Thử ngay

Hình ảnh nền bán trang:}

.bg {
    height: 50%;
}

Thử ngay