Каким-то образом путь фонового изображения не работает в некоторых браузерах

Question

Я хочу использовать background-image, мой код работает на Chrome & Opera, но не работает на IE & Mozilla Firefox.

мой код:

background-image: url('../img/thm-default-background.png');

когда я использую вот так:

background-image: url('./img/thm-default-background.png');

Как-то работает на ie & mozilla, но на этот раз не работает на chrome и opera. Понятия не имею, почему не работает.

Локальное изображение такое;

http://localhost/platform/web/app/img/thm-default-background.png

* т.е. версия: 11,3, опера: 60 ​​

** Edit: теперь я использую изображение SVG с URL-адресом данных.

Answer 1

Относительный путь с ../ и ./ означает два разных пути.

точка-косая черта (./)

Точка (.) указывает на тот же каталог, а косая черта (/) предоставляет доступ к нему.Если ваш каталог выглядит следующим образом:

Локальное изображение находится в папке img , тогда URL-адрес фонового изображения в index.html должно быть background-image: url('./img/thm-default-background.png');.Я протестировал его в IE11, Edge и Chrome, и он работает.

двойная точка-косая черта (../)

A двойная точка (..) указывает на верхний каталог, а также, косая черта (/) дает вам доступ к нему.Если ваш каталог выглядит следующим образом:

Локальное изображение и веб-страница находятся в одной папке, тогда URL-адрес фонового изображения в index.html должен быть background-image: url('../img/thm-default-background.png');.Также работает в IE11, Edge и Chrome.