我是Django的新手并且正在将它用于我的项目，直到我面临一个小问题，这个问题非常小但是从2天开始困扰我。 如何在django模板中应用背景图像？
这是我的index.html： -
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel=" stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis:800" rel="stylesheet">
<title>Document</title>
<style type="text/css">
body {
background: url({% static "images/dumb2.jpg" %});
background-size: cover;
}
.heading {
color: white;
font-family: 'Sedgwick Ave Display', cursive;
font-size: 10vw;
letter-spacing: 20px;
color: rgb(0, 255, 170);
padding-top: 20px;
font-family: 'Cabin Sketch', cursive;
}
.data-rows {
padding-top: 10px;
}
.textfield-labels {
color: white;
font-weight: 600;
}
.textfield {
border: 5px solid black;
}
.signup-heading {
color: white;
font-family: 'Dosis', sans-serif;
letter-spacing: 20px;
}
.bored {
height: 300px;
width: 300px;
}
.font-icons {
color: white;
font-size: 50px;
}
.description {
color: white;
font-weight: 600;
}
.first-description {
padding: 10px;
border-radius: 20px;
border: 1px solid rgb(117, 19, 19);
animation-name: first-block;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.left-column {
padding: 20px;
}
::-moz-placeholder {
text-align: center;
}
::-webkit-input-placeholder {
text-align: center;
}
@keyframes first-block {
from {
background-color: rgba(255, 0, 0, 0);
}
to {
background-color: rgb(117, 19, 19);
}
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-12">
<h1 class="heading">DUMBSTER</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row p-3">
<!--<div class="col-sm-8">
<center><img src="bored.png" class="bored">
<p class="description">A place for People with a Disease of getting bored.</p>
<p class="description">Share your Thoughts, Share your Problems and Date if you like !</p>
</center>
</div>-->
<div class="col-sm-4 text-center left-column">
<p>
<div class="container first-description">
<p><i class="fa fa-users font-icons"></i></p>
<p class="description">Share Your best Momenst and Collect Stars. Don't Hide any emotion and any Problem because there is always a solution</p>
</div>
</p>
<div class="container first-description">
<p><i class="fa fa-star-half-full font-icons"></i></p>
<p class="description">Rate anyone Anonymously on the basis of their Characteristics that You like !</p>
</div>
</div>
<div class="col-sm-4 signup-column p-5">
<div class="container signup-box">
<div class="row text-center">
<div class="col-sm-12">
<h4 class="signup-heading">Sign Up</h4>
<hr>
</div>
</div>
<form class="form-horizontal signup-form">
<div class="row data-rows">
<div class="col-sm-12">
<input type="text" class="textfield form-control" placeholder="Your name" id="username" maxlength="25">
<div class="errors" id="username_error"></div>
</div>
</div>
<div class="row data-rows">
<div class="col-sm-12">
<input type="text" class="textfield form-control" placeholder="Email-id" id="email" maxlength="50">
<div class="errors" id="email_error"></div>
</div>
</div>
<div class="row data-rows">
<div class="col-sm-12">
<input type="text" class="textfield form-control" placeholder="Mobile no." id="phone" maxlength="10">
<div class="errors" id="phone_error"></div>
</div>
</div>
<div class="row data-rows">
<div class="col-sm-12">
<input type="password" class="textfield form-control" placeholder="Password" id="password" maxlength="30">
<div class="errors" id="password_error"></div>
</div>
</div>
<div class="row data-rows">
<div class="col-sm-12">
<input type="password" class="textfield form-control" placeholder="Re-type Password" id="cpassword" maxlength="30">
<div class="errors" id="cpassword_error"></div>
</div>
</div>
<hr>
<div class="row text-center">
<div class="col-sm-12">
<button class="btn btn-info">Sign Up</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-4 text-center left-column">
<p>
<div class="container first-description">
<p><i class="fa fa-heartbeat font-icons"></i></p>
<p class="description">Find a heart that Beats with your heart by Dating anonymously !</p>
</div>
</p>
<div class="container first-description">
<p><i class="fa fa-bolt font-icons"></i></p>
<p class="description">Share what you think anout the Latest Trends going on in the society</p>
</div>
</div>
</div>
</div>
</body>
</html>
我已将STATICFILES_DIR = [STATIC_DIR,]设置为STATIC_DIR = os.path.join(BASE_DIR, 'static')
我的项目文件夹中有一个静态文件夹，里面是图像文件夹。 但经过这么多尝试后，我仍然无法解决这个背景图像问题。
答案 0 :(得分：1)
这里有一个小错误： 背景：url（{％static“ images / dumb2.jpg”％}）;
应该是这样的： 背景图片：url（'/ static / images / dumb2.jpg'）;
答案 1 :(得分：0)
永远不要迟到回答。错误的一种可能来源：您可能遇到语法错误。应该是：
background-image: url({% static "images/dumb2.jpg" %});
不是
background: url({% static "images/dumb2.jpg" %});