如何在Django模板的CSS规则中使用static方法加载背景图？

核心原因 #

你的CSS代码如果放在独立的.css文件里，Django模板标签{% static %}不会被解析，最终浏览器拿到的是原始字符串{% static 'img/people_4.jpeg' %}，自然无法加载图片。模板标签只能在.html模板文件中被Django处理。

可行解决方法 #

方法1：将CSS嵌入HTML模板的<style>标签 #

把这段样式直接写在HTML模板的<style>内，确保模板顶部已经加载了static标签：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <style>
    .hero-landing {
      background: linear-gradient(
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.7)
      ),
      url('{% static 'img/people_4.jpeg' %}');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px;
      color: #fff;
    }
    </style>
</head>
<body>
    <div class="hero-landing">...</div>
</body>
</html>

方法2：使用内联样式 #

直接在HTML元素上通过style属性设置背景，同样要确保加载了static标签：

{% load static %}
<div class="hero-landing" style="background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('{% static 'img/people_4.jpeg' %}'); background-size: cover; background-position: center; background-attachment: fixed;">
    <!-- 内容 -->
</div>

这种方式可以保留独立CSS文件里的其他样式，只把背景图部分移到内联样式。

方法3：用CSS变量传递static URL（适合保留独立CSS文件） #

1. 在HTML模板的<style>中定义CSS变量，注入解析后的static URL：

{% load static %}
<style>
:root {
    --hero-bg-url: "{% static 'img/people_4.jpeg' %}";
}
</style>

2. 在独立的CSS文件中使用这个变量：

.hero-landing {
  background: linear-gradient(
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.7)
  ),
  url(var(--hero-bg-url));
  /* 其他样式保持不变 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  color: #fff;
}

额外检查项 #

• 确认模板开头已经添加{% load static %}，否则static标签无法被识别
• 检查static/img/people_4.jpeg文件是否真实存在，路径大小写是否匹配（Linux服务器区分大小写）
• 验证Django配置：settings.py中STATIC_URL是否正确设置，STATICFILES_DIRS是否包含你的静态文件目录

内容的提问来源于stack exchange，提问作者Baanu