Question

我已经阅读了有关在烧瓶中显示背景图片的其他问题，但没有一个建议的解决方案适合我，我得到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链接：

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

CSS FILE：

#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;
}

Folders

Answer 1

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

如果您的文件结构是：

_Static_assert

只需使用static -img -css

即可

Relevant SO

Answer 2

这是我的目录树结构： directory tree structure

你可以写下这样的背景图像：

background-image: url(../img/nodejsEventLoop.png);

Answer 3

做：

background-image: url('/static/showcase.jpeg');

它对我有用。

Answer 4

做：

background-image: url('../images/pic.png');

哪里static->images->pic.png。

带烧瓶的CSS背景图像

4 个答案: