Question

我正在尝试在我的烧瓶应用程序页面上添加英雄图像。以下是我的flask项目的目录结构。

-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文件）。

缩写：包含文件的文件夹= 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')进行设置。

如何在Css中链接英雄图像以进行烧瓶应用

3 个答案: