Django 无法从 css 添加背景图片答案

【问题标题】：Django cannot add background image from cssDjango 无法从 css 添加背景图片
【发布时间】：2021-03-17 16:04:45
【问题描述】：

我按照django官方文档设置了静态路径。 Document

我删除了隔离的 css 文件并将样式放入我的 HTML 文件中。看来HTML文件获取样式成功了。

在我的setting.py中，我确认了 STATIC_URL = '/static/' 是默认的。

我在我的 app 文件夹下创建了一个名为 static 的新文件夹，用于渲染这个 HTML 页面，并在我的项目下创建了相同的文件夹，我将它们中的内容保持不变，因为我不确定哪个是真正的它识别的“静态”路径。

图片只是没有出现。

我在这里Add background image in css尝试了解决方案，但根本没有。

我试过了：

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../static/img/main.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

没用

请帮助我。谢谢！

编辑，这是我的文件结构：我摆脱了孤立的 CSS 文件并将所有内容复制到 HTML 文件中。现在有了 CSS 样式，但还是无法获取图片。

MyProject
├── static
│   └──img
│       └── img_I_want_to_use_as_background.jpg
├── app
│   └── static
│   │     └──img
│   │         └── img_I_want_to_use_as_background.jpg
│   └── views.py (renders the HTML file)
│   └── other files and dirs under the app

【问题讨论】：

首先清除您的浏览器历史记录，看看这是否能解决您的问题。如果没有，请显示您的文件结构。这很可能是由于 css 不在正确的位置和/或您在 css 中引用图像路径的方式
@ha-neul 我已经更新了我的问题。谢谢

标签： html css django

【解决方案1】：

请将您的 css 文件放在 app.您需要在您的app 的static 文件夹下创建一个app 文件夹，如下所示。

app/static/app/css/yourstylesheet.css

把你的形象：

app/static/app/img/main.jpg

在您的 html 文件中：

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'app/css/yourstylesheet.css' %}">

那么，

url("../img/main.jpg")

../表示parent directory。你首先回到你的static/app文件夹，然后去```img``文件夹找到你的图片。

如果无法正常工作，请清除浏览器历史记录并再次测试

【讨论】：

【解决方案2】：

你应该在你的应用程序中创建一个静态文件夹。

应用程序如下所示： App_name > Static > App_name > css > landing-page.min.css

在这种情况下，模板应该这样写：

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'App_name/css/style.css' %}">

https://docs.djangoproject.com/en/3.1/intro/tutorial06/#customize-your-app-s-look-and-feel

它在哪里说： Put the following code in that stylesheet (polls/static/polls/style.css)

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

【讨论】：

谢谢。我已经用文件结构更新了我的问题。我的应用程序下确实有一个静态文件。我按照文档中的每个步骤进行操作。
现在 css 样式已嵌入到我的 html 中。是否需要用同样的方式编辑css才能得到背景图片？

【解决方案3】：

也许只是您的缓存保存了以前的 CSS？如果您使用 Mac，请尝试 shift + r 或 command + r

【讨论】：