Как использовать изображения в CSS для Flask?

Question

My HTML имеет <section id="banner">, а CSS имеет

#banner {
        padding: 12em 0 10em 0;

        background-image: url({{ url_for('static',filename = '../images/banner.jpg')}});

        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        text-align: center;
        border-top: 0.5em solid #5385c1;
    }

и еще несколько @media. Но из-за некоторых проблем изображение не может загружаться. что здесь не так? все остальное работает. HTML изображения, снятые с использованием <img, работают. Как импортировать изображения в приложение flask через CSS? Моя файловая структура - App-> templates, stati c. , stati c -> CSS, Изображения. , шаблоны -> . html, CSS> . CSS

Answer 1

Все изображения визуализируются только с помощью render_template (), поэтому изображение должно отображаться в файле *. html. Поэтому после импорта изображения в html это решает проблему. inline CSS выполняет свою работу.

Answer 2

Полагаю, вы включили файл CSS из .css в каталог stati c. Jinja2 не обрабатывает эти stati c файлы.

Если вы хотите sh, чтобы не включать этот блок CSS в шаблон HTML, тогда ваш лучший вариант - жестко закодировать этот URL в CSS file:

background-image: url('/static/path/to/background.jpg');

У меня есть некоторые функции, переданные ему с помощью CSS.

Хотя вы можете попробовать определить отдельный блок CSS в шаблон, который присваивает #banner только объявление background-image, а остальная часть этих объявлений определяется в файле .css (затем проверьте свою «функциональность») ...

<style type='text/css'>
#banner
{
  background-image: url({{ url_for('static',filename = '../images/banner.jpg')}});
}
</style>