如何在css中为烧瓶应用链接英雄形象

Question

我想在我的烧瓶应用页面上添加一个英雄形象。以下是我的烧瓶项目的目录结构。

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

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

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

要添加样式，我在CSS-中使用以下my.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？

我也试过绝对路径，backgrouond: url('/static/images/img.jpg')但没有奏效。

Answer 1

像这样更改网址

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

Answer 2

一个选项是用url_for函数替换绝对路径部分，如下所示：

background:url({{ url_for('static', filename='images/img.jpg') }})

该函数将其转换为绝对路径。

Answer 3

路径的快速指南

有三种方法可以访问您的文件。每个都取决于您的文件和您的调用点（您的html文件）的位置。

Abbr：包含文件的文件夹= FCF。呼叫点（html文件）= CP

url('pathtofile/file.jpg') /* FCF is located in the same folder as your CP


url('../pathtofile/file.jpg') /* FCF is located in a folder containing the folder to your CP. Your path goes ONE step backwards and then forward.


url('/pathtofile/file.jpg') /* This starts the search in the absolute root-folder

您可以使用url('../pathtofile/file.jpg')和url('/pathtofile/file.jpg')进行设置。