HTML-CSS Obraz tła nie wyświetlanie

CSS oferuje wiele właściwości stylizacji elementów HTML. Mówiąc dokładniej, dodanie obrazów tła za pomocą CSS jest jednym z ważnych zadań projektowych. Jednak praca z obrazami w tle może być czasami trudne. Wynika to z faktu, że kilka innych czynników może zapobiec wyświetlaniu obrazu tła.

Ten post obejmie następujące informacje:

• Jak poprawnie ustawić adres URL obrazu?
• Jak ustawić rozmiar elementu nadrzędnego obrazu?
• Jak poprawnie połączyć plik CSS?
• Jak ustawić CSS ”tło" nieruchomości?

Jak poprawnie ustawić adres URL obrazu?

Obraz tła nie ładuje się w przeglądarce, jeśli adres URL obrazu jest nieprawidłowy. Przeanalizuj przykład omówiony poniżej, aby dowiedzieć się o problemie z odpowiednim rozwiązaniem.

Przykład

W HTML dodaj „”Element i przypisz go klasa„Banner-Img”:

Style „Banner-Img” klasa

.Banner-Img
szerokość: 400px;
Wysokość: 300px;
Imaga tła: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Rozmiar tła: okładka;

Według danego fragmentu kodu:

• "szerokość”Określa szerokość elementu.
• "wysokość”Dostosowuje wysokość elementu.
• "zdjęcie w tle”Określa adres URL obrazu.
• "Rozmiar tła”Z wartością„okładka”Pasuje do obrazu w całym pojemniku.

Wyjście

Jeśli dodasz adres URL niewłaściwego obrazu, jak wspomniano w poniższym bloku kodu, wystąpi błąd 404:

.Banner-Img
szerokość: 400px;
Wysokość: 300px;
Imaga w tle: URL (/IMG/żarówki-5488573_1920.jpg);
Rozmiar tła: okładka;

Kliknij prawym przyciskiem myszy stronę internetową i wybierz „sprawdzać„Opcja, okno narzędzia programisty pokaże status zasobu:

Jak ustawić rozmiar elementu nadrzędnego obrazu?

Czasami obraz nie ładuje się na stronie internetowej, jeśli rozmiar elementu nadrzędnego nie jest ustawiony.

Przeanalizuj poniższy przykład.

Przykład

Dodać "”Element i przypisz go klasa„transparent”:

.treść
Imaga tła: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Rozmiar tła: okładka;
szerokość: 400px;
Wysokość: 500px;

Tutaj:

• "zdjęcie w tle”Ustawia adres URL obrazu tła.
• "Rozmiar tła”Ustawia rozmiar obrazu. Mówiąc dokładniej, „okładka„Wartość obejmuje cały pojemnik.

Wyjście

Jak poprawnie połączyć plik CSS?

Jeśli używasz zewnętrznego arkusza stylów, upewnij się, że „”Element musi być odpowiednio określony. Nazwa pliku musi być poprawnie określona w „Href" atrybut:

Jak ustawić właściwości „tła” CSS?

CSS „tło„Właściwości muszą być odpowiednio określone w elementach:

.Banner-Img
Margines: Auto;
szerokość: 400px;
Wysokość: 250px;
Imaga tła: URL (/IMG/Light-Bulbs-5488573_1920.jpg);
Rozmiar tła: okładka;
Upozycja tła: Center;
Powtórzenie tła: bez powtórzenia;

Tutaj:

• "zdjęcie w tle”Określa adres URL obrazu tła.
• "Rozmiar tła”Ustawia rozmiar obrazu tła.
• "pozycja w tle”Dostosowuje pozycję obrazu tła.
• "powtarzanie tła”Określa, czy obraz jest powtarzany.

CSS „tło„Nieruchomość można określić jako nieruchomość skrót jak ten:

Tło: URL (/IMG/Light-Bulbs-5488573_1920.JPG) Centrum/Okładka bez powtórzenia;

Notatka: Pozycja tła i rozmiar tła muszą być oddzielone „/”Slash, jak wspomniano w powyższym bloku kodu. W przeciwnym razie nie wyświetli obrazu.

Aby zweryfikować, sprawdź stronę i obserwuj okno narzędzia programisty, zobaczysz następujące:

To są przyczyny i poprawki dla obrazu tła CSS, które nie wyświetlają problemu.

Wniosek

Aby poprawnie załadować obraz tła, należy wziąć pod uwagę wiele czynników. Obejmują one prawidłowe ustawienie adresu URL obrazu, dostosowanie szerokości i wysokości elementu nadrzędnego, prawidłowo włączając link zewnętrznego arkusza stylów, oraz określenie CSS ”tło”Właściwości poprawnie. Ten post wyjaśnił poprawki dla obrazów tła, które nie wyświetlają problemu.