如何在Django内联CSS的背景图片URL中使用{% static %}标签？

问题根源 #

"at-rule or selector expected"错误本质是CSS语法解析失败，通常是因为在style属性中使用Django模板标签时，引号嵌套错误或模板标签未被正确解析，导致生成的CSS代码不符合规范。

前置检查（必做） #

确保你的Django项目基础配置正确：

• settings.py中INSTALLED_APPS包含'django.contrib.staticfiles'
• STATIC_URL已正确配置（如STATIC_URL = '/static/'）
• 使用{% static %}标签的模板顶部已添加{% load static %}

正确实现方式 #

1. 内联style写法（直接在HTML中设置） #

错误写法（会导致CSS语法错误）：

<!-- 错误：url()内未加引号，模板解析后可能破坏CSS结构 -->
<div style="background-image: url({% static 'images/loading.gif' %});"></div>

正确写法（注意引号嵌套，确保生成合法的CSS）：

<!-- 推荐：用单引号包裹static生成的URL，外层用双引号 -->
<div style="background-image: url('{% static 'images/loading.gif' %}');"></div>

<!-- 或反过来，外层单引号，内部双引号 -->
<div style='background-image: url("{% static "images/loading.gif" %}");'></div>

2. 外部CSS文件写法（更规范，推荐） #

外部CSS文件无法直接解析Django模板标签，因此需要通过相对路径引用静态资源：

1. 给目标div添加类名：

<div class="bg-gif"></div>

2. 在CSS文件中根据静态文件目录结构写相对路径：
   假设你的静态文件目录结构是：

static/
├── css/
│   └── style.css
└── images/
    └── loading.gif

则CSS中写法为：

.bg-gif {
    background-image: url('../images/loading.gif');
    /* 可补充其他背景样式：如background-size, background-repeat等 */
}

额外排查点 #

• 查看浏览器控制台的网络请求，确认图片URL是否被正确解析（比如是否变成/static/images/loading.gif），若返回404，检查图片是否放在正确的静态目录下
• 若使用模板继承，确保{% load static %}在父模板或当前子模板中已加载（不能仅在父模板的block外加载，子模板需要的话要单独添加）

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