Tại sao hình nền của tôi không hiển thị trong html

Phần tử body bao phủ khung nhìn, do đó, việc đặt hình ảnh làm nền cho phần thân ban đầu sẽ bao phủ khung nhìn (nói đúng ra là hình ảnh thực sự được truyền tới phần tử html vì phần thân không thực sự có chiều cao cho đến khi nội dung làm như vậy nhưng

Tuy nhiên, khi nội dung kéo dài qua phần dưới cùng của chế độ xem, nền sẽ tiếp tục ở dưới màn hình đầu tiên và bao phủ hết nội dung

Nếu bạn không có bất kỳ nội dung nào trên trang ngoài tiêu đề và nút thì đây không phải là vấn đề nhưng sẽ có những cách tốt hơn để thực hiện việc này một cách đáng tin cậy hơn nếu tất cả những gì bạn muốn là một hình ảnh có kích thước cổng xem e. g…

Tại sao hình nền của tôi không hiển thị trong html
Động cơ44

Trên một số thiết bị nhỏ hơn, hình ảnh bị cắt một chút ở hai bên

Một hình ảnh không thể vừa với một khung nhìn mà không bị cắt xén theo một cách nào đó. Khi bạn sử dụng thuộc tính cover thì chiều rộng và chiều cao của hình ảnh sẽ được tăng lên theo tỷ lệ cho đến khi cả hai lấp đầy khu vực cần thiết. Điều này sẽ dẫn đến hình ảnh xuất hiện bị cắt theo hướng này hay hướng khác trừ khi hình ảnh có hình dạng chính xác của chế độ xem hiện được xem (điều này sẽ không bao giờ xảy ra trong hầu hết các trường hợp).

Tại sao hình nền của tôi không hiển thị trong html

TLDR. Chọn hình ảnh của bạn một cách cẩn thận

Tại sao hình nền của tôi không hiển thị trong html

Nếu bạn có thể đính kèm hình ảnh bạn muốn sử dụng thì chúng tôi có thể hiển thị một ví dụ

Tại sao hình nền của tôi không hiển thị trong html

Ngoài ra, hãy lưu ý rằng 'Màn hình chào mừng' nằm trong danh sách mười lỗi hàng đầu của nhà thiết kế web và tạo thêm một cú nhấp chuột giữa nội dung của bạn và khán giả của bạn. Hãy suy nghĩ cẩn thận xem liệu chúng có mang lại lợi ích gì cho bạn hay không nếu thực sự đó là điều bạn đang cố gắng thực hiện

Khi bạn nói rằng phần tử được coi là rỗng, bạn đã đúng. Mặc dù có một tiêu đề và nút trong phần tử, cả hai đều được định vị cố định. Vì vậy, bản đồ sẽ không hiển thị. Tôi đã không nghĩ đến vấn đề dòng chảy

Mục tiêu của tôi là có bản đồ làm hình nền. Tốt nhất có thể, nó sẽ bao phủ các khung nhìn của mọi kích cỡ thiết bị. Người dùng cũng có thể cuộn được. Tuy nhiên, tiêu đề và nút của trang web không được cuộn, do đó chúng đã được sửa

Tôi hầu như đã hoàn thành việc này với cài đặt này cho bản đồ

cơ thể {
nền. url('/ImgMaster/map. jpg’) không lặp lại chính giữa/bìa;
chiều rộng. 100vw;
chiều cao. 250vh;
độ rộng tối đa. 1500px;
}

Chiều cao yêu cầu điều chỉnh cho các thiết bị khác nhau. Có lẽ có một cách tốt hơn. Trước đó bạn đã đề cập đến việc sử dụng kỹ thuật tỷ lệ khung hình cho nền. Tôi không bao giờ làm việc đó. Bạn có nghĩ rằng đó là cách tốt nhất để đạt được mục tiêu của mình không?

Đây là hình ảnh bản đồ

Tại sao hình nền của tôi không hiển thị trong html

bản đồ683×920 846 KB

Tôi hiểu nhận xét của bạn về việc có một trang đích, nhưng trong trường hợp này, nó phù hợp

Cảm ơn bạn

CẬP NHẬT. Tôi đã thử phương pháp tỷ lệ khung hình và có vẻ như nó hoạt động khá tốt đối với bản đồ. Đây là mã tôi đã sử dụng

cơ thể {
nền. url('/ImgMaster/map. jpg’) không lặp lại chính giữa/bìa;
chiều rộng. 100vw;
chiều cao. 0;
độ rộng tối đa. 1500px;
padding-top. 135%;
}

Toàn bộ bản đồ xuất hiện trên tất cả các thiết bị. Tuy nhiên, trên màn hình nhỏ ở chế độ dọc, bản đồ không lấp đầy toàn bộ màn hình theo chiều dọc. Tôi đoán đó là điều dễ hiểu. Có thể cần sử dụng một phương pháp khác với tỷ lệ khung hình cho các màn hình đó. Nếu bản đồ được phóng to để lấp đầy chiều cao thì các cạnh sẽ phải bị cắt bớt

Viết mã rất hấp dẫn nhưng cần học hỏi nhiều. Tôi đã nghỉ hưu nên tôi có thời gian

Tại sao hình nền của tôi không hiển thị trong html
Động cơ44

Viết mã rất hấp dẫn nhưng cần học hỏi nhiều. Tôi đã nghỉ hưu nên tôi có thời gian

Vâng, thực hành là chìa khóa và có rất nhiều điều để học với CSS ngày nay

Tại sao hình nền của tôi không hiển thị trong html

Tôi đã rẽ nhánh ví dụ từ @coothead (cảm ơn) và đặt văn bản của bạn theo cách phản hồi

Tại sao hình nền của tôi không hiển thị trong html
Động cơ44

Tuy nhiên, trên màn hình nhỏ ở chế độ dọc, bản đồ không lấp đầy toàn bộ màn hình theo chiều dọc

Có, hầu hết các điện thoại có chiều rộng thậm chí không bằng một nửa chiều cao của chúng, vì vậy bạn không thể làm cho hình vuông vừa với hình chữ nhật mà không cắt xén nó theo một cách nào đó. Tôi sẽ đề xuất rằng trong truy vấn phương tiện cho các thiết bị nhỏ hơn, bạn tăng phần đệm trên cùng và sau đó sử dụng kích thước nền. trải ra. Tất nhiên, nó sẽ cắt các cạnh một chút khi hình ảnh thu nhỏ để phù hợp với chiều cao nhưng vẫn khá ổn

Ngoài ra, biến nó thành một tính năng và tô màu phần dưới cùng của màn hình bằng màu nền phù hợp trên phần thân (Trong ví dụ của tôi ở trên, tôi đã sử dụng nền màu vàng nhưng không có lý do gì bạn không thể sử dụng thứ gì đó nổi bật hơn

Tại sao hình nền của tôi không hiển thị trong HTML?

Đảm bảo đường dẫn hình ảnh được đặt chính xác trong url hình nền . Khi bạn đã chắc chắn rằng tệp CSS của mình được liên kết chính xác, hãy kiểm tra xem bản thân hình ảnh có được đặt chính xác không. Một lần nữa, bạn sẽ muốn mở trình kiểm tra mã của mình trong trình duyệt để kiểm tra.

Làm cách nào để đặt hình nền trong HTML CSS?

Ảnh nền CSS .
Đặt hình nền cho trang. cơ thể {hình nền. url("giấy. gif"); }.
Ví dụ này cho thấy sự kết hợp không tốt giữa văn bản và hình nền. Các văn bản là khó có thể đọc được. cơ thể {hình nền. url("bgdesert. jpg");.
p { hình nền. url("giấy. gif"); } Tự mình thử »

Tại sao tôi không thể chèn hình ảnh vào HTML?

Đường dẫn tệp không chính xác . Đây là mã cho trình duyệt biết nơi tìm và lấy hình ảnh từ. Trong hầu hết các trường hợp, điều này sẽ nằm trong một thư mục có tên hình ảnh.