【问题标题】:Background won't run with flask [duplicate]背景不会与烧瓶一起运行[重复]
【发布时间】:2021-08-27 01:21:49
【问题描述】:

我有这个应用程序,我制作了一个动画背景,当我在 chrome 中打开 HTML 时效果很好,但是当我用烧瓶运行它时,它不会添加背景,只是忽略它 这可能是我错过的东西,但我仍然不明白为什么它不加载背景

HTML - 1:

<!doctype html>
<html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Covid-19</title>
  </head>
  <body>
    <section>
      <h1>Animated something</h1>
    </section>
    
    {% block content %}
    {% endblock content %}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS:

@import "https://fonts.googleapis.com/css?family=Lato:100";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html{
    font-size: 10px;
    font-family:  "Latop", Arial, sans-serif;
}

section{
    width: 100%;
    height: 100vh;
    color: #fff;
    background:  linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    position: relative;
    animation: change 10s ease-in-out infinite;
}

h1{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 3px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5rem 10rem;
}

@keyframes change{
    0%{
        background-position: 0 50%;
    } 
    50%{
        background-position: 100% 50%;
    }  
    100%{
        background-position: 0 50%;
    }  
}

Python:

from flask import Flask, render_template, request
def create_app():


    app = Flask(__name__)

    @app.route('/', methods=['POST', 'GET'])
    def home():

            
        return render_template("base.html")
     
    return app

【问题讨论】:

  • 你为什么要在函数中声明app = Flask(__name__)。这就是你所有的python代码??
  • 我在其他文件上运行它,但这不是问题@Kunal Tanwar
  • 您能否也发布您的文件夹结构的图像?还有整个python代码??

标签: python html css flask


【解决方案1】:

这是由于服务器无法找到 style.css 文件。要解决此问题,请确保您的静态文件位于烧瓶应用程序 python 文件旁边名为“静态”的文件夹中。像这样:

/app
    - app.py
    /templates
        - base.html
    /static
        - style.css

并使用以下方法轻松链接模板中的文件:

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

Check Flask's docs for more details

祝你好运:)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-03-17
    • 2018-07-09
    • 1970-01-01
    • 2020-09-15
    • 1970-01-01
    • 2016-12-12
    • 1970-01-01
    相关资源
    最近更新 更多