Flask本地服务器无法加载CSS背景，请求技术排查帮助

直接打开index.html时样式和背景动画正常，但通过Flask的localhost:5000访问时，浏览器控制台提示style.css 404错误，背景无法显示。

问题原因 #

Flask默认要求静态资源（CSS、图片、JS等）放在static目录下，当前文件结构不符合Flask的静态资源查找规则，导致服务器无法定位到style.css文件。

解决步骤 #

1. 调整项目文件结构 #

按Flask规范重新整理文件：

你的项目文件夹/
├── app.py
├── static/
│   ├── css/
│   │   └── style.css
│   └── image/
│       └── Leesinbackground.png
└── templates/
    └── website/
        ├── index.html
        ├── register.html
        ├── loged.html
        └── us.html

2. 修改HTML中的CSS引用路径 #

在index.html中，把CSS的引用改为Flask推荐的路径（二选一即可）：

• 使用Flask的url_for生成路径（推荐）：

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

• 直接写绝对路径：

<link rel="stylesheet" href="/static/css/style.css" />

3. 修改CSS中的本地图片路径 #

style.css里的本地图片路径要对应static目录结构，修改为：

background-image: url("/static/image/Leesinbackground.png");

修改后的完整代码 #

app.py（无需修改） #

# -------------------- Importaciones -------------------- #

from flask import Flask, render_template, request, redirect
from flask import send_from_directory


# -------------------- App -------------------- #

app = Flask(__name__) # Creo la app.


# -------------------- ROUTES -------------------- #

@app.route('/') # Página principal, qué se llama index.
def start(): # Creo una función que me retorne con un return hacia la página.
    return render_template('website/index.html')

@app.route('/register') # Página de registro.
def register():
    return render_template('website/register.html')

@app.route('/loged') # Página para logearse.
def loged():
    return render_template('website/loged.html')

@app.route('/us') # Página de nosotros.
def us():
    return render_template('website/us.html')


if __name__ == '__main__': # Inicializamos nuestra app con el .run.
    app.run(debug = True)

修改后的index.html #

<!-- Importaciones y demás -->
<!DOCTYPE html>
<html lang="es">

<head>
    <title>Título</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>


<!-- Comienza el código -->

<body>
    <header>
        <div class="main">
            
        <!-- Menú cabecera -->

        <nav class="navbar navbar-expand navbar-light bg-light">
            <div class="nav navbar-nav">
                <a class="nav-item nav-link" href="/register" aria-current="page">Registrarse</a>
                <a class="nav-item nav-link" href="/loged">Iniciar sesión</a>
                <a class="nav-item nav-link" href="#">FREE</a>
                <a class="nav-item nav-link" href="/us">Nosotros</a>
            </div>
        </nav>
            
            <!-- Boton de Iniciar sesión -->

            <!--<button  class="pulse" onclick="window.location.href='http://Tibia.com';" >
                <b>Iniciar sesion</b>
            </button>-->
            
            <!-- Animación fondo -->
            
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
            <div class="d4"></div>
        </div>
    </header>
</body>

</html>

修改后的style.css（仅修改本地图片路径部分） #

*{
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}
  .main {
    height: 100vh;
    width: 100vw;
    position: relative;
  }
  .d1 {
    position: absolute;
    background-image: url("/static/image/Leesinbackground.png");
    background-size: 1920px 1080px;
  
    height: 30vh;
    width: 15vw;
  
    background-position: 0 50%;
  
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    animation: dd1 10s 1, dd12 10s 1;
    animation-delay: 4s, 14s;
  }
  /* 其余CSS代码保持不变 */

验证效果 #

调整完成后，重启Flask服务器，访问localhost:5000，此时CSS文件会被正确加载，背景动画也能正常显示。

内容的提问来源于stack exchange，提问作者Franco Di Mascio