时间戳

首页 > 解决方案 > 如何在 CSS 中为烧瓶应用程序链接英雄图像

python - 如何在 CSS 中为烧瓶应用程序链接英雄图像

问题描述

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

-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')但没有奏效。

标签： pythonhtmlcssflaskjinja2

解决方案

像这样更改网址

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

推荐阅读