如何在Css中鏈接英雄圖像以進行燒瓶應用

Question

我正在嘗試在我的燒瓶應用程序頁面上添加英雄圖像。 以下是我的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 ？

我也嘗試了絕對路徑， 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')進行設置。