带烧瓶的CSS背景图像 [英] CSS Background Images with Flask

问题描述

我还阅读了有关在烧瓶中显示背景图像的其他问题，但没有建议的解决方案对我有用，并且我收到404错误(127.0.0.1--[22/Feb/2018 15:13:33] "GET/img/showcase.jpeg HTTP/1.1" 404-).我要设置为背景的jpeg图像位于静态文件夹中，并称为Showcase.jpeg.这是我的代码.有什么建议?这是指向我的style.css的HTML链接:

I have read other questions about getting background images in flask to show, but none of the suggested solutions worked for me and I get a 404 error(127.0.0.1 - - [22/Feb/2018 15:13:33] "GET /img/showcase.jpeg HTTP/1.1" 404 -). The jpeg image I want to set as the background is located in the static folder and called showcase.jpeg. Here is my code. Any suggestions? Here's the HTML Link to my style.css:

<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='style.css')}}">

CSS文件:

#showcase{
  background-image: url({{ url_for ('static', filename = 'showcase.jpeg') }});
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  font-weight: bold;
}

文件夹

推荐答案

CSS文件被读取为静态文件，因此您不应该在CSS中使用url_for方法.

CSS files are read as static files, so you shouldn't be using the url_for method in your CSS.

如果您的文件结构是:

static
  -img
  -css

只需使用background-image: url( img/showcase.jpeg )

相关SO

这篇关于带烧瓶的CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！