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 đề.
cơ thể {css-hình ảnh. url['http. //www. lai lịch. com/pw-content/hình ảnh/thư mục/nền. jpg'];đệ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
Kiểm tra bìa nền
nội dung {lề. 1;
Chiều cao. 200vh;
lai lịch. màu xanh lam, url[https. //lai lịch. nó/2000/2000]; . nhân;
kích thước nền. sửa chữa;
}
vùng chứa {chiều rộng. 90%;
lề. 0 ô tô;
trung tâm; . #0000;
mục địa điểm
trưng bày. lưới;
}
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