Làm việc với hình nền trong CSS có thể khó khăn. Bởi vì ngay cả khi bạn đặt nó trong mã, vẫn có những yếu tố khác có thể ngăn hình nền hiển thị trên trang.
Để giải quyết vấn đề đó, đây là bốn cách để khắc phục hình ảnh nền của bạn không hoạt động, sử dụng HTML và CSS:
1. Kiểm tra xem tệp CSS của bạn có được liên kết chính xác trong tệp HTML của bạn không.
Để các kiểu CSS được tải trong trang web của bạn, bạn cần thêm <link> trong tệp HTML của bạn. Thẻ này phải được đặt bên trong <head></head> và sẽ trông giống như sau:
<link rel="stylesheet" href="/style.css">Làm cách nào để biết tệp CSS của bạn được tải đúng cách hay không?
Một dấu hiệu là nếu bạn tải trang web của mình và nền là màu trắng, tất cả văn bản trông giống như phông chữ Times New Roman và không có màu sắc hoặc kiểu khác.
Bạn cũng có thể kiểm tra công cụ kiểm tra của trình duyệt bằng cách nhấp chuột phải vào bất kỳ đâu trong trang và chọn “Kiểm tra phần tử” hoặc nhấn Ctrl-Shift-I. Trong trình kiểm tra, nếu bạn thấy lỗi cho biết 404 not found đối với tệp CSS hoặc The resource... was blocked due to MIME type mismatch , điều đó cho bạn biết rằng đã xảy ra sự cố khi tải tệp CSS.
Nếu bạn thấy một trong những lỗi này và trang web của bạn trông chưa được phân loại, điều đầu tiên cần kiểm tra là Trong <link> nhãn. Đảm bảo rằng href thuộc tính đang tải cùng một tên tệp với tệp CSS thực của bạn và đường dẫn đó chính xác.
Đường dẫn cần phải liên quan đến vị trí của tệp HTML của bạn. Nếu tệp CSS nằm trong cùng thư mục với tệp HTML của bạn, bạn có thể đặt href thành style.css (hoặc bất kỳ tên tệp CSS của bạn là gì).
Tôi thường đặt một dấu gạch chéo về phía trước / trước đường dẫn, ví dụ:href="/style.css" . Điều này sẽ đảm bảo rằng đường dẫn sẽ bắt đầu từ gốc trang web của bạn.
Bạn có thể cần điều này nếu bạn có các trang trong các thư mục con khác nhau đang tải cùng một <head> mã số. Ví dụ:nếu bạn đang sử dụng CMS mẫu (hệ thống quản lý nội dung) có mã được chia sẻ.
2. Đảm bảo rằng đường dẫn hình ảnh được đặt chính xác trong url hình ảnh nền.
Khi bạn đã đảm bảo 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 đặt đúng chưa. 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 để biết liệu hình nền được tải đúng hay không?
Nếu hình nền dường như không tải và bạn thấy lỗi 404 trong trình kiểm tra hình ảnh, thì đó là một dấu hiệu tốt cho thấy có vấn đề với chính hình ảnh đó.
Nếu điều này đang xảy ra, hãy kiểm tra kỹ xem tên tệp hình ảnh có khớp với tệp thực không và đường dẫn trong background-image: url() sẽ đến đúng vị trí.
Vị trí của tệp hình ảnh cần phải liên quan đến vị trí của chính tệp CSS, không phải gốc trang web của bạn. Vì vậy, nếu tệp CSS của bạn nằm trong một thư mục con, đường dẫn có thể cần phải khác so với khi tệp CSS nằm trong thư mục gốc của bạn.
Để giúp giải thích điều này, giả sử bạn có cấu trúc tệp trang web như sau:
(project folder)
|-- index.html
|-- (css)
|-- style.css
|-- (img)
|-- cat-pic-1.jpg
Trang web này chứa index.html trong thư mục gốc của dự án, một css thư mục chứa style.css và một img thư mục chứa hình ảnh cat-pic-1.jpg .
Trong các kiểu CSS của bạn, nếu bạn muốn tải cat-pic-1.jpg làm hình nền, đường dẫn tệp cần phải:
- Lên một cấp độ sau
cssthư mục, - Điều hướng đến
imgthư mục, - Sau đó, tải chính tệp hình ảnh.
background-image thuộc tính trong tệp CSS sẽ giống như sau:background-image: url('../img/cat-pic-1.jpg') .
../ biểu tượng có nghĩa là bạn sẽ tăng một cấp trong cấu trúc tệp.
Bạn có thể làm điều tương tự bằng cách cài đặt:background-image: url('/img/cat-pic-1.jpg') .
Cách tiếp cận này sử dụng dấu gạch chéo lên (/ ) để bắt đầu từ thư mục gốc của trang web, sau đó chuyển đến img thư mục để tải tệp hình ảnh.
Vì vậy, cho dù bạn điều hướng lên qua các thư mục mẹ hay bắt đầu từ thư mục gốc của trang web, đừng quên sử dụng trình kiểm tra mã của bạn để kiểm tra và kiểm tra xem hình ảnh đang tải hay đang đưa ra lỗi 404 cho bạn.
3. Đặt rõ ràng chiều rộng và / hoặc chiều cao của phần tử.
Nếu hình ảnh không hiển thị nhưng bạn không gặp phải bất kỳ lỗi 404 nào, hãy chuyển đến trình kiểm tra mã và kiểm tra chính phần tử đó.
Nếu không có nội dung HTML trong phần tử, nó có thể không có chiều rộng hoặc chiều cao (hoặc cả hai!). Điều này có nghĩa là mặc dù hình ảnh nền được tải đúng kỹ thuật, bản thân phần tử này về cơ bản là ẩn nếu nó là 0px về kích thước.
Kiểm tra ví dụ trên hiển thị một trang web và trình kiểm tra mã. Nếu bạn di chuột qua .card__image phần tử trên khung bên phải, một nhãn sẽ xuất hiện trên phần tử ở khung bên trái, cho bạn biết rằng nó có 354px chiều rộng và 0px chiều cao.
0px đó chiều cao có nghĩa là phần tử sẽ không hiển thị.
Để khắc phục, hãy đặt chiều cao của .card__image một cách rõ ràng phần tử thành height: 120px . Nếu phần tử có thể có nội dung văn bản có độ dài khác nhau, bạn có thể đặt nó thành min-height: 120px thay vào đó, nó sẽ có kích thước tối thiểu là 120px cao nhưng có thể cao hơn nếu nội dung văn bản cần thêm không gian.
4. Đảm bảo rằng bạn đang sử dụng đúng cú pháp trong thuộc tính nền CSS.
Một điều cuối cùng bạn có thể kiểm tra là liệu bạn có đang sử dụng đúng cú pháp cho các thuộc tính CSS nền hay không.
Dưới đây là một số giá trị phổ biến mà bạn có thể đang sử dụng, cùng với các giá trị có thể có:
-
background-color: #000000; -
background-image: url("/landscape1.jpg"); -
background-position: center; -
background-repeat: no-repeat; -
background-size: cover;
Bạn cũng có thể sử dụng background viết tắt thuộc tính cho phép bạn kết hợp tất cả các giá trị khác nhau đó trong một quy tắc kiểu:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;
Nếu bạn đang sử dụng thuộc tính viết tắt này với nhiều giá trị, hãy đảm bảo rằng cú pháp là chính xác. Thứ tự của các thuộc tính nền khác nhau không thành vấn đề, nhưng có một khó khăn phức tạp nếu bạn đang đặt background-size .
background-size chỉ có thể được sử dụng nếu nó nằm ngay sau background-position giá trị, với dấu gạch chéo lên (/ ) giữa họ. Trong ví dụ của chúng tôi, nó được viết như thế này:center/cover , nơi center là background-position và cover là background-size .
Bạn có thể sử dụng background-position giá trị của chính nó, nhưng nếu bạn cố gắng chỉ sử dụng cover tự nó, quy tắc CSS sẽ không hợp lệ và không có của các thuộc tính nền sẽ hoạt động.
Nếu điều đó xảy ra, bạn sẽ có thể thấy quy tắc không hợp lệ trong trình kiểm tra mã như sau:
