python - 如何在 css 中为 flask 应用程序链接英雄形象

Question

我正在尝试在我的 Flask 应用程序页面上添加主图。以下是我的 Flask 元素的目录结构。

-static
 |--css_files
   |--my.css
 |--images
   |--img.jpg
-templates
 |--layout.html

现在，为了添加英雄形象，我在 layout.html 中有以下 HTML 代码-

<div class="hero-image">
    <div class="hero-text">
        <h1>My Heading</h1>
        <p>Some paragraph</p>
    </div>
</div>

为了添加样式，我在 my.css-

中使用了以下 CSS 代码

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ url_for('static',filename='images/img.jpg') }});
    /* Set a specific height */
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

但是，我只能看到 hero-text 而不是图片。 如何将此 img.jpg 链接到 my.css？

我也尝试了绝对路径，background: url('/static/images/img.jpg') 但没有成功。

Answer 1

像这样更改网址

background:url('../static/images/img.jpg') ;