Đây là correct behavior. body không ngay lập tức chiếm toàn bộ chiều cao của chế độ xem, mặc dù nó xuất hiện như vậy khi bạn chỉ áp dụng nền cho phần sau. Trong thực tế, các yếu tố html sẽ mất trên nền của body nếu bạn không cung cấp cho nó nền của riêng mình, và html sẽ chuyển thông tin này vào chế độ xem:
Nền của phần tử gốc trở thành nền tảng của canvas và khu vực vẽ nền của nó mở rộng để bao phủ toàn bộ canvas, mặc dù bất kỳ hình ảnh nào có kích thước và vị trí tương đối so với phần tử gốc như thể chúng được vẽ riêng cho phần tử đó. (Nói cách khác, khu vực định vị nền được xác định là cho phần tử gốc.) Nếu giá trị ‘background-color’ của root là ‘transparent’, màu nền của canvas phụ thuộc vào UA. Phần tử gốc không vẽ lại nền này, tức là, giá trị được sử dụng của nền của nó là trong suốt.
Đối với tài liệu có phần tử gốc là phần tử HTML HTML hoặc phần tử XHTML html: nếu giá trị được tính của 'background-image' trên phần tử gốc là 'none' và 'background-color' là 'transparent', thay vào đó, tác nhân người dùng phải truyền các giá trị được tính của thuộc tính nền từ phần tử HTML BODY hoặc XHTML body đầu tiên của phần tử đó. Giá trị được sử dụng của thuộc tính nền của phần tử BODY là giá trị ban đầu của chúng và giá trị được truyền được xử lý như thể chúng được chỉ định trên phần tử gốc. Chúng tôi đề nghị tác giả của tài liệu HTML chỉ định nền canvas cho phần tử BODY thay vì phần tử HTML.
Điều đó nói rằng, tuy nhiên, bạn có thể chồng lên bất kỳ hình ảnh nền trên một màu nền trên một yếu tố duy nhất (hoặc html hoặc body), mà không cần phải dựa vào hai yếu tố - chỉ cần sử dụng background-color và background-image hoặc kết hợp chúng trong background tài sản viết tắt:
body {
background: #ddd url(background.png) center top no-repeat;
}
Nếu bạn muốn kết hợp hai hình ảnh nền, bạn cần phải dựa trên nhiều nền tảng.Có chủ yếu hai ngày để làm điều này:
Trong CSS2, đây là nơi mà phong cách cả hai yếu tố có ích: chỉ cần đặt một hình nền để html và một hình ảnh để body mà bạn muốn để chồng lên trên đầu tiên. Để đảm bảo các hình ảnh nền trên body hiển thị ở độ cao khung nhìn đầy đủ, bạn cần phải áp dụng height và min-height tương ứng cũng như:
html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
Ngẫu nhiên, lý do tại sao bạn cần phải xác định height và min-height để html và body tương ứng là vì không yếu tố nào có chiều cao nội tại. Cả hai đều là height: auto theo mặc định. Đó là chế độ xem có chiều cao 100%, do đó, height: 100% được lấy từ chế độ xem, sau đó áp dụng cho body ở mức tối thiểu để cho phép cuộn nội dung.
Trong CSS3, cú pháp đã được mở rộng, do đó bạn có thể declare multiple background values in a single property, loại bỏ sự cần thiết phải áp dụng hình nền với nhiều yếu tố (hoặc điều chỉnh height/min-height):
body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
Thông báo trước duy nhất là trong một đơn nền nhiều lớp, chỉ có lớp dưới cùng có thể có màu nền. Bạn có thể thấy trong ví dụ này thiếu giá trị transparent từ lớp trên.
Và đừng lo lắng - hành vi được chỉ định ở trên với việc truyền các giá trị nền hoạt động giống hệt nhau ngay cả khi bạn sử dụng hình nền nhiều lớp.
Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn cần phải sử dụng phương thức CSS2 được hỗ trợ tất cả cách quay lại IE7.
Bình luận của tôi dưới this other answer giải thích, với một kèm fiddle, làm thế nào body là thực sự bù đắp từ html bởi lề mặc định mặc dù có vẻ như nó đang được đệm ra thay vào đó, một lần nữa do hiện tượng có vẻ kỳ lạ này.
Điều này có thể có nguồn gốc từ việc thiết HTML background và bgcolor thuộc tính của body gây nền thuộc tính để áp dụng cho toàn bộ khung nhìn. Thêm thông tin về số here.
bản sao có thể có của [Sự khác nhau giữa việc áp dụng quy tắc css cho html so với nội dung là gì?] (Http: // stackoverflow.com/questions/6739601/what-is-the-different-between-apply-css-rules-to-html-so-so-to-body) –