Блог

Главная - Вопросы по программированию - Фон-тег стиля открытого изображения в html-файле не отображается

Фон-тег стиля открытого изображения в html-файле не отображается

#html #css #background #background-image

#HTML #css #фон #background-image

Вопрос:

В HTML-файле у меня есть следующее

 <style type="text/css">
body {
  color: #1e90ff;
  background-image: url("abc.png");
     }
</style>

HTML-файл находится в том же каталоге, что и abc.png

Изменение цвета работает

Я использую веб-сервер tornado для запуска приложения flask, и в моем терминале появляется следующее предупреждение

 WARNING:tornado.access:404 GET /abc.png (XX.XXX.XXX.XX) 0.61ms

Мое изображение не отображается, я перепробовал все, что нашел здесь, и это не увенчалось успехом. Даже изменение разрешений файла (chmod).
Спасибо

Комментарии:

1. Используйте двоеточие, а не знак равенства.

2. Опубликуйте свой HTML тоже

3. Вы можете попробовать устранить неполадки в CSS, изменив URL-адрес изображения на внешний URL-адрес другого изображения, абсолютный путь к вашему изображению и внешний URL-адрес этого изображения.

4. Похоже, что он пытается получить изображение с корневого уровня веб-сервера. Возможно, вы используете следующий CSS: url («/ abc.png»)?

5. @patrickhawley Единственное, что сработало, — это изменить URL-адрес изображения на внешний URL-адрес другого изображения. Спасибо. Но я все еще обеспокоен тем, что загрузка его из каталога не сработала

Ответ №1:

Я полагаю, это связано с тем, что статические файлы обслуживаются Tornado. Если это так, то вам нужно указать static_path в настройках tornado.

Что-то вроде этого: 

 handlers = [
(r"/", BaseHandler),]

settings = dict(
    template_path=os.path.join(PATH, "templates"),
    static_path=os.path.join(PATH, "static"),)

app = tornado.web.Application(handlers, **settings)

Теперь сохраните все ваши статические файлы внутри статического каталога, а все шаблоны — в каталоге шаблонов.
Кроме того, ваш тег стиля теперь будет выглядеть так 

 <style type="text/css">
body {
  color: #1e90ff;
  background-image: url("{{static_url('abc.png')}}");
     }
</style>