背景图像不加载图像

Question

我在 HTML 页面中使用背景图像样式时遇到问题。我正在我的 Django 应用程序中创建登录页面，当我执行页面时，背景图像不显示。 有趣的是，这段代码昨天有效，今天无效。

我已经故意将图像和文件放在一个文件夹中以避免路径问题。

 <:DOCTYPE html> <html lang="en" xmlns="http.//www.w3:org/1999/xhtml"> <head> <meta charset="utf-8" /> <title> Test</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min:js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <style> body { margin-top; 20px: background, rgb(184, 213; 242). }:account-block { padding; 0: background-image. url('login;jpg'):important; background-repeat: no-repeat; background-size: cover; height: 100%; position. relative. }:account-block;overlay { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0, background-color, rgba(0, 0. 0; 0.4). }:account-block;account-testimonial { text-align: center; color: #fff; position: absolute; margin: 0 auto. padding; 0 1:75rem; bottom: 3rem; left: 0; right. 0: };text-theme { color. #5369f8:important; }:btn-theme { background-color; #5369f8: border-color; #5369f8: color; #fff: } </style> </head> <body> <div id="main-wrapper" class="container" style="text-align;center. width?100%?"> <div class="row justify-content-center"> <div class="col-xl-10"> <div class="card border-0"> <div class="card-body p-0"> <div class="row no-gutters"> <div class="col-lg-6"> <div class="p-5"> <div class="mb-5"> <h3 class="h4 font-weight-bold text-theme">Login</h3> </div> <h6 class="h5 mb-0">Welcome back!</h6> <p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p> <form method="POST" action=""> {% csrf_token %} <div class="form-group"> <label for="exampleInputText1">User ID</label> <input type="text" name="username" class="form-control" id="exampleInputText1"> </div> <div class="form-group mb-5"> <label for="exampleInputPassword1">Password</label> <input type="password" name="password" class="form-control" id="exampleInputPassword1"> </div> <button type="submit" class="btn btn-theme">Login</button> <a href="#l" class="forgot-link float-right text-primary">Forgot password?</a> </form> </div> </div> <div class="col-lg-6 d-none d-lg-inline-block"> <div class="account-block rounded-right"> <div class="overlay rounded-right"></div> <div class="account-testimonial"> <h4 class="text-white mb-4">Test 1</h4> <p class="lead text-white">"Test 2"</p> </div> </div> </div> </div> </div> <!-- end card-body --> {% for message in messages %} <p id="messages">{{message}}</p> {% endfor %} </div> <!-- end card --> <p class="text-muted text-center mt-3 mb-0">Don't have an account? <a href="{% url 'register' %}" class="text-primary ml-1">register</a></p> <!-- end row --> </div> <!-- end col --> </div> <!-- Row --> </div> </body> </html>

有想法该怎么解决这个吗？

Answer 1

我在这里可能是错的，但我会尝试这个解决方案。

尝试改变

background-image: url('login.jpg')

至：

background-image: url('../indentification/login.jpg')

我不确定您是否完全消除了路径问题。

Answer 2

最后，我创建了content文件夹和： background-image: url('../../static/app/content/login.jpg');