[英]How to link hero image in css for flask application
I am trying to add a hero image on my flask app page. 我正在尝试在我的烧瓶应用程序页面上添加英雄图像。 Following is the directory structure for my flask project. 以下是我的flask项目的目录结构。
-static
|--css_files
|--my.css
|--images
|--img.jpg
-templates
|--layout.html
Now, in order to add a hero image, I have following HTML
code in layout.html
- 现在,为了添加英雄图像,我在layout.html
使用以下HTML
代码-
<div class="hero-image">
<div class="hero-text">
<h1>My Heading</h1>
<p>Some paragraph</p>
</div>
</div>
To add style, I am using following CSS
code in my.css
- 要添加样式,我在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;
}
But, I am only able to see the hero-text
and not the image. 但是,我只能看到hero-text
而不是图像。 How can I link this img.jpg
into my.css
? 如何将img.jpg
链接到my.css
?
I tried absolute path also, backgrouond: url('/static/images/img.jpg')
but didn't work. 我也尝试了绝对路径, backgrouond: url('/static/images/img.jpg')
但没有用。
像这样更改网址
background:url('../static/images/img.jpg') ;
An option would be to replace the absolute path part with the url_for function, like this: 一种选择是用url_for函数替换绝对路径部分,如下所示:
background:url({{ url_for('static', filename='images/img.jpg') }})
The function converts it into the absolute path for you. 该函数将其转换为您的绝对路径。
A quickguide to paths 路径快速指南
There is three ways to get to your file. 有三种获取文件的方法。 Each one depends on the location of your file and your calling point (your html-file). 每个文件都取决于文件的位置和调用点(您的html文件)。
Abbr: Folder Containing File = FCF. Abbr:包含文件的文件夹= FCF。 Calling Point (html-file) = CP 呼叫点(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
You can use both url('../pathtofile/file.jpg')
and url('/pathtofile/file.jpg')
for your setup. 您可以同时使用url('../pathtofile/file.jpg')
和url('/pathtofile/file.jpg')
进行设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.