Tuy nhiên, những vấn đề này không nhất thiết là do lỗi mã hóa. Ngay cả khi mã của bạn đúng, nhiều yếu tố khác có thể ngăn không cho hình nền của trang web xuất hiện trên một trang. Dưới đây là một số cách khắc phục sự cố hình nền không hoạt động

nội dung

• Đảm bảo tệp CSS của bạn được nhúng đúng cách vào tệp HTML của bạn
• Đặt chính xác đường dẫn của hình ảnh thành URL hình nền
• Sử dụng cú pháp chính xác trong thuộc tính hình ảnh nền CSS
• Đặt rõ ràng Chiều cao và Chiều rộng của Ảnh nền
• Khắc phục sự cố ảnh nền CSS không hoạt động với thuộc tính tệp đính kèm nền
• Khắc phục sự cố Ảnh nền CSS không hoạt động bằng cách tăng tốc Ảnh nền
  • – Tải trước hình nền
  • – Sử dụng Object Fit và IMG Tag cùng nhau
  • – Hình ảnh phản hồi
  • – Hình nền nội tuyến
• Cách khắc phục ảnh bìa nền CSS không hoạt động
• Sự kết luận

Đảm bảo tệp CSS của bạn được nhúng đúng cách vào tệp HTML của bạn

Tệp CSS phải được liên kết với tệp HTML để hình nền được hiển thị hoặc tải chính xác trên trang web. Hơn nữa, bạn phải bao gồm thẻ liên kết trong tệp HTML để khắc phục sự cố chẳng hạn như URL hình nền không hoạt động. Thẻ liên kết phải luôn có dạng như sau  bên trong thẻ .

Nếu tệp CSS không được liên kết đúng cách với tệp HTML, nền sẽ có màu trắng và không hiển thị bất kỳ kiểu hoặc màu nào ngay khi tải trang web. Để chẩn đoán lỗi này, bạn có thể kiểm tra bằng phần tử kiểm tra bằng cách nhấp chuột phải vào trang công cụ kiểm tra của trình duyệt. Nếu bạn thấy lỗi 404 not found hoặc resource do loại MIME không khớp, điều đó có nghĩa là tệp CSS của bạn không được tải đúng cách

Nếu bạn gặp phải các loại lỗi như vậy, trước tiên hãy kiểm tra thẻ . Đảm bảo rằng thuộc tính href đang tải cùng một tệp với tệp CSS thực tế. Ngoài ra, hãy đảm bảo rằng đường dẫn của tệp là chính xác và có liên quan đến tệp HTML. Nếu các tệp HTML và CSS nằm trong cùng một thư mục, bạn có thể đặt href làm kiểu. css. Dấu gạch chéo về phía trước thường được đặt trước đường dẫn. Chẳng hạn như href = “/style. css”.

Điều này sẽ xác nhận rằng đường dẫn sẽ bắt đầu từ thư mục gốc của trang web. Nếu các trang của bạn nằm trong các thư mục con khác nhau và bạn muốn tải tất cả chúng bằng mã , thì bạn phải đặc biệt cẩn thận để đặt dấu gạch chéo lên . Ngoài ra, nếu hình nền CSS không tải, hãy thử mã này để giải quyết vấn đề.

đệm-phải. 20em;

đệm-trái. 11em;

Lần, serif;

họ phông chữ. Chuyển phát nhanh mới, “Bảng điều khiển Lucida”;

màu sắc. màu xanh da trời;}

Đặt chính xác đường dẫn của hình ảnh thành URL hình nền

Nếu hình nền CSS không hoạt động, thì có một số lý do cho việc này. Điều thường xảy ra là bạn không đặt đúng đường dẫn của hình nền, do đó hình nền trang web của bạn không hoạt động CSS

Nếu bạn đang chỉ định hình nền của trang web trong phần nội dung của biểu định kiểu CSS và nền của trang web vẫn hiển thị màu trắng, thì thay vì chỉ nhập tên của hình ảnh trong phần nội dung, chẳng hạn như body {background. url ('background_image. jpeg');}. Bạn phải tải lên đường dẫn đầy đủ của hình nền như thế này

cơ thể {nền tảng. url('http. //www. hình nền. com/pw-content/uploads/home/background_image. jpeg);}

Điều này sẽ giải quyết vấn đề hình nền CSS không hoạt động

Sử dụng cú pháp chính xác trong thuộc tính hình ảnh nền CSS

Điều quan trọng là sử dụng đúng cú pháp để đặt hình nền một cách hoàn hảo. Ngay cả một lỗi nhỏ trong cú pháp của bạn cũng có thể gây ra sự cố khi hiển thị hình nền. Đây là những cú pháp được sử dụng phổ biến nhất với hình nền

• hình nền. url(“hình ảnh/background_image. jpg”);
• màu nền. #000002;
• Bối cảnh Lặp lại. không lặp lại;
• vị trí nền. trung tâm;
• kích thước nền. trải ra;
• kích thước nền. 10px 20p;
• hình nền. độ dốc tuyến tính (trắng, đen);

Thay vì đặt riêng các thuộc tính này, bạn có thể sử dụng tính năng tốc ký. Với tính năng này, bạn kết hợp tất cả các giá trị khác nhau thành một kiểu, chẳng hạn như

lai lịch. không lặp lại. #center/url bìa(“/images/background_image. jpg”)       #0000;

Khi sử dụng tính năng tốc ký, cú pháp phải hoàn hảo. Không thành vấn đề nếu bạn đặt các tính năng nền theo một thứ tự khác. Bạn có thể tùy chỉnh các tính năng. Tuy nhiên, thay đổi kích thước nền có thể là một nhiệm vụ khó khăn

Tính năng kích thước nền chỉ được sử dụng khi tính năng này ngay sau tính năng vị trí nền có dấu gạch chéo {/}. Ví dụ: có các tính năng trung tâm hoặc bìa, trong đó bìa cho biết kích thước của nền và trung tâm gợi ý vị trí của nền

Bạn có thể sử dụng riêng tính năng vị trí nền. Tuy nhiên nếu bạn chỉ sử dụng tính năng cover mà không sử dụng tính năng background-position đi kèm thì file CSS sẽ tạo ra lỗi. Do đó, lỗi tạo mã không hợp lệ cũng sẽ xuất hiện trong phần còn lại của các tính năng nền

Đặt rõ ràng Chiều cao và Chiều rộng của Ảnh nền

Nếu bạn không nhận được lỗi 404, nhưng hình nền không hiển thị, thì bạn nên kiểm tra toàn bộ thành phần trong trình kiểm tra mã. Nếu không có nội dung HTML trong phần tử, thì chiều cao hoặc chiều rộng của phần tử đó bằng 0 hoặc cả hai đều được đặt thành 0, nghĩa là hình nền của trang web của bạn được tải chính xác về mặt kỹ thuật nhưng bị ẩn do phần tử của nó là 0px

Chiều cao 0px có nghĩa là phần tử sẽ không hiển thị như hình nền, v.v. Để khắc phục loại sự cố này, bạn đặt chiều cao của phần tử hình ảnh thành 120px và chiều rộng 300px. Bạn có thể đặt chiều cao tối thiểu thành 125px nếu bạn muốn hiển thị nội dung văn bản cùng với hình ảnh

Làm cách nào để đặt chiều rộng và chiều cao của hình nền?

ví dụ 1. Thiết lập tự động

lai lịch. url(background_image. jpg);

kích thước nền. Tự động;

Bối cảnh Lặp lại. không lặp lại;

}

ví dụ 2. Đặt thủ công

lai lịch. url(background_image. jpg);

kích thước nền. 300px 120px;

Bối cảnh Lặp lại. không lặp lại;

}

Khắc phục sự cố ảnh nền CSS không hoạt động với thuộc tính tệp đính kèm nền

Tính năng đính kèm nền được sử dụng để cuộn hoặc sửa hình nền trong CSS vì cuộn là giá trị mặc định của nó. Thuộc tính này có các giá trị sau

Địa phương. Trong giá trị này, hình nền được cuộn cùng với nội dung

Sửa chữa. Sử dụng giá trị này sửa hình nền với trang

cuộn. Hình nền được cuộn cùng với trang sử dụng giá trị này

Cú pháp. tệp đính kèm nền. địa phương. sửa chữa. cuộn. ban đầu

Khắc phục sự cố Ảnh nền CSS không hoạt động bằng cách tăng tốc Ảnh nền

Hình nền không hoạt động hoặc tải trong CSS là một vấn đề phổ biến. Một cách để khắc phục vấn đề này là tăng tốc ảnh nền. Hình nền thường được sử dụng làm hình ảnh nổi bật hoặc thanh trượt. Những hình ảnh này thường mất nhiều thời gian để tải, dẫn đến các vấn đề như hình ảnh không tải hoặc không hoạt động

Tuy nhiên, cách dễ nhất để khắc phục những vấn đề này là tăng tốc độ hình nền của trang web của bạn. Các phương pháp sau đây rất hữu ích để tăng tốc ảnh nền

– Tải trước hình nền

Với tính năng tải trước, hình nền trong màn hình đầu tiên của bạn đã được tải sẵn. Theo phương pháp này, giá trị ưu tiên của hình nền được đặt. Trong đó trình duyệt được lệnh tải xuống hình ảnh nền trên các ưu tiên hàng đầu

var image = background Image();

var image2 = ảnh nền();

var image3 = ảnh nền();

hình ảnh. src=”background_images/pic/image1. png”;

hình ảnh2. src = background_images/pic/image2. png”;

hình ảnh3. src= background_images/pic/image3. png”;

– Sử dụng Object Fit và IMG Tag cùng nhau

Object Fit là một thuộc tính CSS mới. Thuộc tính này được sử dụng với các thẻ IMG mà không cần thay đổi kích thước hình nền. Do sử dụng thuộc tính này, hình nền được tải lên nhanh chóng và chất lượng của nó vẫn còn nguyên vẹn

hình ảnh {

bề rộng. 100px;

Chiều cao. 150px;

phù hợp với đối tượng. giảm quy mô;}

– Hình ảnh phản hồi

Bạn có thể cung cấp hình ảnh phản hồi bằng cách thêm kích thước và srcset vào hình ảnh bình thường

bg{

Hinh nên. url(“hình ảnh. jpg”);

Hinh nên. Bộ ảnh{

"hình ảnh. jpg” 1×;

“hình ảnh-2×. jpg” 2×;

“hình ảnh in. jpg” 600dpi

}}

– Hình nền nội tuyến

Giả sử hình nền của trang web của bạn nằm trong tệp CSS bên ngoài, đặt trực tiếp hình ảnh đó với tệp HTML. Bằng cách này, trình duyệt sẽ tải hình ảnh trực tiếp từ HTML và trình duyệt sẽ không phải đợi để tải hình ảnh từ tệp CSS. Do đó, việc tải ảnh nền sẽ tăng tốc và vấn đề ảnh nền css không hoạt động sẽ được giải quyết

Cách khắc phục ảnh bìa nền CSS không hoạt động

Bạn có thể khắc phục sự cố ảnh bìa nền không hoạt động bằng cách sử dụng mã này

<. loại tài liệu html>

<đầu>

Bìa nền

Hình nền

khắc phục sự cố hình nền

Sự kết luận

Do đó, điều quan trọng là phải giải quyết tất cả các điểm sau để đặt hình nền trong CSS một cách hoàn hảo

• 
  Nhúng đúng tệp CSS với HTML
• Sử dụng đúng cú pháp của mã CSS và HTML
• Tăng tốc ảnh nền
• Đặt đường dẫn của hình ảnh một cách chính xác
• Sửa rõ ràng chiều cao và chiều rộng của hình nền

Như bạn đã biết, hình ảnh đóng một vai trò quan trọng trong việc làm cho trang web của chúng tôi hấp dẫn. Nếu bạn thấy ảnh nền CSS của trang web không hoạt động, URL ảnh nền không hoạt động, CSS ảnh nền không hoạt động và ảnh nền CSS không tải. Bạn có thể làm theo các kỹ thuật chúng tôi đã đề cập trong bài viết này. Tất cả những kỹ thuật này đều cực kỳ hữu ích và hiệu quả

Đánh giá bài viết này

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL

Tại sao màu nền của tôi không hoạt động trong CSS?

Đó là vì cả hai phần tử con của bạn đều được thả nổi bên trái . Điều này có nghĩa là vùng chứa sẽ không kéo dài hết chiều cao cần thiết để chứa các phần tử con.

Tại sao CSS không hoạt động?

Điều này thường xảy ra khi trình duyệt cung cấp phiên bản đã lưu trong bộ nhớ cache của tệp CSS của bạn . Để vô hiệu hóa bộ đệm và cung cấp phiên bản mới nhất của tệp CSS, bạn có thể thực hiện tải lại cứng trên trình duyệt.