Django 1.11.3 CSS 背景图片未显示

Question

我正在尝试在 django 1.11.3 中使用 css 显示我的背景图像，并且在运行无法加载图片的服务器时在终端中收到一些 404 错误。我的 css 文件确实加载并且可以更改home.html文件中的内容。

首页.html

{% extends 'layout.html' %}
{% load static %}
{% block content %}
<div class="container-fluid">
<div class="row img-bg">
<div class="col-sm-12">
<a href='#'>My Button</a>
</div>
</div>
</div>

.CSS-

.img-bg{
background: url('../img/logo.png'); // 404 error
background: url('../assets/img/logo.png'); // 404 error
background: url("{% static 'img/logo.png' %}"); // 404 error
background-size: 100% auto;
height: 100px; 
width: 100px;
}

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)

文件夹结构

website_src
--assets
--css
--style.css
--img
--logo.png

Answer 1

更改 css文件，因为您通过/static/在资产中提供所有文件

.img-bg{
background: url('/static/img/logo.png');
background-size: 100% auto;
height: 100px; 
width: 100px;
}

Answer 2

Django 3.0.5

我学会了做以下事情...

# settings.py
STATIC_ROOT= os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'your+project/static')
]

因此，您可以添加背景图像而不带单引号或使用/static/img/image.jpg。

• 确保在更改后运行python manage.py collectstatic或插入 CSS 文件。
• 有两个静态文件夹需要具有相同的更改， 一个在根目录中，一个在以项目命名的主文件夹中。
• 确保您没有改用background: url(../img/image.jpg) no-repeat top center fixed/cover;，请使用background: url(../img/showcase.jpg) no-repeat top center fixed;.其中我 相信是浏览器CSS兼容性问题，在Chrome上更具体。
• 您始终可以使用内联样式并指向源/静态的？<section id="showcase" style="background: url('/static/img/showcase.jpg') no-repeat top center fixed;">.

Answer 3

更改以下内容：

STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)

自：

STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

然后python manage.py collectstatic，看看这是否有帮助。