Django 在 css 文件中使用背景图像的方法

Posted

技术标签:

【中文标题】Django 在 css 文件中使用背景图像的方法【英文标题】：The way to use background-image in css files with Django 【发布时间】：2017-02-07 17:31:40 【问题描述】：

我想在Django 上使用一个图像文件作为背景图像。但是我不知道怎么做。 首先，我阅读了 this 并尝试在 css 文件中像下面这样写。

#third
    background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;

但这不起作用。

% load staticfiles %
#third
    background: url(% static "img/sample.jpeg" %) 50% 0 no-repeat fixed;

和

#third
    background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;

也不行。

当你在 css 文件上使用 background-image 时，你通常如何编写 css 文件？请给我一些建议好吗？

C:\~~~~~~> dir hello\static\img
2016/09/28  19:56             2,123 logo.png
2016/09/24  14:53           104,825 sample.jpeg


C:\~~~~~~> dir hello\static\css
2016/09/29  20:27             1,577 site.css


C:\~~~~~~> more lemon\settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)


C:\~~~~~~> more hello\templates\base.html
% load staticfiles %
<link rel="stylesheet" type="text/css" href="% static "css/site.css" %" />

Django 版本：1.9.2

【问题讨论】：

How to refer to static files in my css files?的可能重复 您可以使用 CSS 文件所在位置的相对路径（使用 ../ 向上），或域根目录的相对路径（以 / 开头），或绝对路径 (包括域名）。 @timo.rieber 感谢您的评论。我在这个网站上阅读了几个相同的问题，但我无法解决。我阅读了您的链接并学到了很多东西。谢谢。 @Andrei Gheorghiu 谢谢你的建议。联合国？？？ url("../img/sample.jpeg") 现在工作了...我不知道为什么以前没有工作...但是无论如何，我很感谢您的建议。谢谢。 【参考方案1】：

使用这个：

    #third
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;

这很可能会起作用。在您的图片 URL 前使用“/static/”，然后尝试它们。谢谢

【讨论】：

【参考方案2】：

确保 django.contrib.staticfiles 包含在您的 INSTALLED_APPS 中。

在你的 settings.py 文件中定义 STATIC_URL:STATIC_URL = '/static/'

     % load static %
     <img src="% static "my_app/example.jpg" %" />

或

     #third
          background: url(' STATIC_URL my_app/example.jpg'

【讨论】：

感谢您的建议，LuKs Sys。我可以问你一个问题吗？我可以在site.css 中写 STSTIC_URL 吗？我需要在没有% load static % 的情况下写这个吗？还是你最后的代码应该写在 html 文件中？【参考方案3】：

由于某些原因，我无法解释接受的答案对我来说并不奏效。 （我想用一张图片作为全身的封面图）。

但是，对于任何可能对遇到的人有用的人来说，这里是对我有用的替代方案。

在静态文件目录下的一个css文件中，我写了以下内容：

CSS：

body 
  background: url(../main/img/picture-name.jpg);

您不必在 css 文件中包含 *'% load static %'*。

HTML：

    在顶部包含%load static%

    为样式创建一个链接href，如下所示。

    &lt;link href='% static "/main/home.css" %' rel='stylesheet' type='text/css'&gt;

【讨论】：

【参考方案4】： 
background-image: url('% static '.jpg' %');

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。在解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。【参考方案5】：

base.html 在正文标签中

    <body>

% load static %

    </body>

style.css

#third
    background: url("/static/img/sample.jpeg")  50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;

问题解决

【讨论】：

【参考方案6】：

这是我的项目的目录结构，因此您可以了解我为什么要使用我正在使用的 URL，这样您就可以将其调整到您的项目中。 根目录是包含项目和应用程序的文件夹。我有 4 个应用程序（contacto、galeria、inicio、mapa）和“WebCalistenia”，这是您创建项目时生成的文件夹。我有一个静态文件夹，其中有一个名为父亲（“WebCalistenia”）的孩子，它有两个孩子“/css”和“/img”

enter image description here

这对我有用。 首先你必须在你的 HTML 上% load static %。

% load static %
<!DOCTYPE html>
<html lang="en">
<head>
...

现在您将 CSS 链接到 HTML

    <link rel="stylesheet" href="% static 'app_name/css/document.css' %">

最后是你要写的css文件：

background: url("../img/image_name.jpeg");

【讨论】：

【参考方案7】：

在 Django 链接的开头和结尾加上撇号，它应该可以工作。

background: url('% static "img/sample.jpeg" %') 50% 0 no-repeat fixed;

【讨论】：

【参考方案8】：

可能你的 url 路径不正确，如果它是正确的，使你的 .css 文件静态，并且在运行服务器后确保你清除所有缓存的图像和文件，你可以通过按 Ctrl 来清除缓存+Shift+Del 并勾选“缓存的图像和文件”。

【讨论】：

【参考方案9】：

你好，我遇到了一些问题，我使用 pycharmS 作为工具，这是我设法解决问题的方法 显然你必须在你的 html 文件中加载静态文件并设置你的 settings.py

如果一切顺利，但问题出在 css 文件上 您的图像位于名为 img 的文件夹中，该文件夹位于静态文件夹下 你必须这样做： 背景：Url("../img/myimage.jpeg")；这是你图像的一部分 后台的所有设置代码不要放在同一行

背景重复：不重复；

背景附件：固定；

背景位置：中心；

您使用 Chrome 之类的浏览器打开您的项目

【讨论】：

【参考方案10】： 
background-image: url('../img/4799045.jpg');

我认为最好的方法

【讨论】：

【参考方案11】：

我遇到了同样的问题。只需确保您的图像在您的 CSS 目录中。因为由于您使用 % load static % 将 CSS 文件加载到 HTML 中，这意味着每次 CSS 文件都会搜索该目录中的图像（我将图像放在“我的 CSS 文件所在的静态目录”之外这就是为什么它不起作用）。所以简单的把你的图片放在静态目录下（你的图片和CSS文件在“静态文件夹”的同一目录下）

【讨论】：

【参考方案12】：

我有同样的困惑，我遵循上述答案，但由于某些原因，引用对我不起作用。 这在模板中对我有用：

% load static %

background-image: url('% static 'my_folder/image.jpg' %');"

【讨论】：

【参考方案13】：

虽然这里列出的解决方案是正确的，但我只想添加一件事，您需要在更新 CSS 后清除浏览器的缓存（Ctrl + F5）。 参考这个链接。

Django CSS not updating

【讨论】：

点评来源： 嗨，虽然链接是分享知识的好方法，但如果它们在未来被破坏，它们将不会真正回答问题。将回答问题的链接的基本内容添加到您的答案中。如果内容太复杂或太大而无法在此处放置，请描述所提出解决方案的总体思路。请记住始终保留对原始解决方案网站的链接引用。见：How do I write a good answer?【参考方案14】：

这是来自Django Documentation 的最佳解决方案，但我还是发布了简单的解决方案：

1- django.contrib.staticfiles 应该包含在您的 INSTALLED_APPS 中

Settings.py

文件。

2-在末尾添加以下内容

settings.py

如果尚未添加。

STATIC_URL = '/static/'

3- 在 html 文件中使用 static 通过 img 标签或 css 加载图像。 

% load static %
<img src="% static 'my_app/example.jpg' %" >

或

% load static %
<style>
    .bgimg 
      background-image: url("% static 'my_app/example.jpg' %");
    
</style>

4-（重要）

在您的 app 目录 中创建 static 文件夹，然后在您的静态文件夹中再次使用您的应用程序名称创建目录并将您的图像放在那里。文件夹如下：

my_app/static/my_app/example.jpg

完成所有这些步骤后，图像应该显示得非常好。

【讨论】：

【参考方案15】：

您可以使用 html 样式标签，而不是添加 .css 文件。

在您的 HTML 顶部添加此内容

% load static %

在&lt;head&gt;标签中添加这样的

<style>
    #third 
        background: url(" STATIC_URL img/sample.jpeg") 50% 0 no-repeat fixed;
    
</style>

如果您以后更改静态文件路径，它不会损坏

【讨论】：

【参考方案16】：

设置背景图片 URL - 2021 年更新。

我相信你们中的大多数人都在为自己的样式使用单独的 .css 文件。 下面是一个简单的解释：

你需要在你的settings.py 文件中设置STATIC_URL = '/static/' 来告诉Django 在哪里可以找到你的静态文件。此外，您可能已经知道这一点，因为您走了这么远来寻找答案。但是给你：

您需要在模板中包含% load static %。

现在，您要为元素设置背景图像。这是一个示例静态文件夹结构：

static
│
├───css
│   ├───accounts
│   └───homepage
│           top.css
├───img
│       top-image.png
└───js
        dropdown.js

从top.css 文件，您想访问img/top-image.png 文件。以下是您拥有的所有选项：

   /* The best option because it also works with cloud storage services like AWS*/
   .my-element 
       background-image: url("/static/img/top-image.png");
    

   /* It works when Django is serving your static files from local server, not recommended for production*/
   .my-element 
       background-image: url("../../img/top-image.png");

其余示例假定您正在编写内联样式或模板内的 &lt;style&gt; 标记（而不是单独的 .css 文件）

   /* Because it is inside your template, Django can translate `STATIC_URL`  into a proper static files path*/
   .my-element 
       background-image: url("STATIC_URLimg/top-image.png");
    

   /* Similarly you can use % static 'static_path' % inside your template with no issues*/
   .my-element 
       background-image: url("% static 'img/top-image.png' %");

您可以使用 - 您可以通过多种方式从 css 访问您的静态文件。

【讨论】：

【参考方案17】：

如果有人在寻找解决此问题的其他方法，您可能希望从您的服务器或您有权访问的任何图像托管服务中热链接图像。这是我解决这个问题的方法：

    在图片托管网站或您的服务器中上传图片（试试 Drive/Dropbox） 右键单击并在新选项卡中打开图像以访问图像 URL 复制带有 (.jpeg, .png) 扩展名的图片 URL 并粘贴到您的 HTML 文档中。

这是一个例子：

https://images.your-host.com/photos/image-path-here.jpeg

【讨论】：

【参考方案18】：

只需将"/static/../img.jpeg" 放在路径url 之前

【讨论】：

这行不通，因为您选择了路径static，但您又立即退出了它。所以我建议去掉双点。 其实我已经留下点来添加你的路径 这种混乱值得更多解释。

以上是关于Django 在 css 文件中使用背景图像的方法的主要内容，如果未能解决你的问题，请参考以下文章

如何在 django 中链接我的 css、js 和图像文件链接

Django 在生产中找不到通过 CSS 文件链接的图像

在css背景图像中反应公共文件夹的路径

在 Django 中加载 CSS/图像

如何在 django 的打印页面（模板）中设置背景图像

CSS中的背景图像