我的CSS文件工作，但我无法添加背景图像。我尝试3路但不工作。
这是我的style.css
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
这是我的base.html（img正在运行）
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VPW{% endblock %}</title>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<script href="{% static 'js/bootstrap.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row head">
<div class="col-md-12">
<div class="col-md-4">
</div>
<div class="col-md-4 logo">
<img src="{% static 'img/logo1.png' %}">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
这是我的main.html，我有班级第一信息。
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
我尝试改变css background-image：url（“{％static'img / bg.jpg'％}”）; to background-image：url（“img / bg.jpg”）;但不要工作
这是预期的行为。 Django模板引擎在渲染html模板时填充所有变量。它不会填充html中包含的css文件中的值。
你的base.html因为{% static 'img/logo1.png' %}被替换成像/static/img/logo1.png这样的东西，浏览器能够找到图像，加载它并呈现它。
如果你想让你的背景图像动态，你也可以。
您可以直接在模板中添加css类，即
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
<style>
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
或者直接在html标记中使用内联css。
<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >
或者只需硬编码css文件中的完整路径。但它消除了动态行为，即你的静态路径。我假设它只是/static/
.first-info{
width: 100%;
height: 300px;
background-image: url( '/static/img/bg.jpg' );
}
试试这个：
background-image：url（'{{STATIC_URL}} / img / bg.jpg'）;
迟到的答案，但我想与试图动态加载背景图像的人分享。我的例子是渲染在views.py中生成的数据库请求。该请求包含三个元素：background.photo，background.title和background.body。虽然没有必要，但我想对照片应用不透明度;但是，使用opacity属性会将效果应用于DOM中元素的所有子元素，因此我使用rgba将效果与照片隔离。文本被覆盖而不受照片不透明度的影响。为了使文本脱颖而出，我使用水平渐变使左侧的照片变暗。
{% extends 'base_layout.html' %}
{% block content %}
<div class="background-image" style="background: url({{ background.photo.url }} ) no-repeat; background-size: 100%;">
<div class="container">
<h2 class="title-text">{{ background.title }}</h2>
<p class="body-text">{{ background.body }}</p>
</div>
</div>
{% endblock %}
和css：
.container{
background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,0));
}
.background-image{
margin: 1em;
border-style: solid;
border-width: 1px;
border-color: #ff0080;
}
.title-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: .5em 1em;
}
.body-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: 1.5em 4em;
}
Django不处理.css文件包括只渲染html模板。
你的CSS是静态文件，如果你希望它是可扩展的，那么应该通过处理某种管理命令来包含它们。
否则只需使用url的路径