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

我想使用一个图像文件作为Django的背景图像。但是我不知道怎么做。首先，我读了这篇文章，并试着把它写成一个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文件上使用背景图片时，你通常怎么写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

用这个:

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

这很可能会奏效。在图像URL前使用“/static/”，然后尝试使用它们。谢谢

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

在您的settings.py文件中定义STATIC _ URL:STATIC _ URL = '/STATIC/'

{% load static %}
     <img src="{% static "my_app/example.jpg" %}" alt="My image"/>

或者

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

由于一些我无法解释的原因，这个公认的答案对我来说并不适用。(本想用一张图作为全身的封面图)。

然而，这里有一个对我有用的选择，对任何人来说，可能对将要遇到的人有用。

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

CSS:

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

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

HTML:

在顶部包含{%load static%}

创建一个链接href到style，如下所示。

& ltlink href = ' { % static "/main/home . CSS " % } ' rel = ' style sheet ' type = ' text/CSS ' & gt；

我相信你们大多数人都在使用单独的。你的风格的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");
    }

其余的例子假设您正在编写内联样式或内部& ltstyle & 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_URL}}img/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中访问静态文件的许多可能的方法。

这里是我的项目的目录结构，所以你可以在我为什么使用我正在使用的URL的背景下，所以你可以适应你的项目。根目录是包含项目和应用程序的文件夹。我有4个应用程序(contacto，galeria，inicio，mapa)和& quotWebCalistenia & quot这是创建项目时生成的文件夹。在那里我有一个静态文件夹，里面有一个被称为父亲的孩子。WebCalistenia & quot)有两个孩子& quot/css&quot和& quot/img & quot；

在此输入图像描述

这是对我有用的。首先你必须在你的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");

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

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

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

身体标签中的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;   
}

问题解决方案

你好，我有一些问题，我使用pycharmS作为工具，这就是我如何设法解决问题显然，您必须在html文件中加载static，并为

如果一切都做得很好，但问题是在css文件您的图像在静态文件夹下的img文件夹中你必须这样做: 背景:Url(& quot；../img/myimage.jpeg&quot);这是你形象的一部分不要将背景的所有设置代码放在同一行

背景-重复:不重复；

背景-附件:固定；

背景-位置:中心；

你用CHROME之类的浏览器打开你的项目，我用的是微软EDGE，我的项目没有同时应用任何更改

我认为最好的方法

我也有同样的问题。只要确保你的图片在你的CSS目录中。因为你用{% load static %}在HTML中加载CSS文件，这意味着每次CSS文件都会在那个目录中搜索图像(我把我的图像放在& quot存放我的CSS文件& quot这就是它不工作的原因)。所以简单来说把你的图片放在静态目录下(你的图片和CSS文件放在同一个目录下的& quot静态文件夹& quot)

我也有同样的困惑，我遵循了上面提到的答案，但是由于某些原因，引用对我不起作用。这是在模板中对我有效的方法:

{% load static %}

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

虽然这里列出的解决方案是正确的，但我只想补充一点，你需要在更新CSS后清除浏览器的缓存(Ctrl + F5)。参考此链接。

Django CSS没有更新

这是Django文档中的最佳解决方案，但我还是会发布简单的解决方案:

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' %}" alt="My image">

或者

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

4-(重要) 在你的应用程序目录中创建静态文件夹，然后在你的静态文件夹中再次创建带有你的应用程序名称的目录，并将你的图像放在那里。这些文件夹如下所示:

my _ app/static/my _ app/example . jpg 经过所有这些步骤，图像应该显示非常好。

而不是加入。css文件可以使用html样式标签。

将此添加到您的HTML顶部

{% load static %}

在& lthead & gt标签添加如下

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

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

如果以上任何一个答案都不能解决您的问题，请尝试清除您的浏览器缓存。

在windows上shift + f5

如果有人在寻找另一种方法来解决这个问题，你可能想从你的服务器或任何你可以访问的图像托管服务热链接图像。我是这样解决这个问题的:

将图片上传到图片托管网站或你的服务器上(试试Drive/Dropbox) 右键单击并在新选项卡中打开图像，以访问图像URL 复制带有(。jpeg，。png)扩展名并粘贴到您的HTML文档中。这里有一个例子:

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

只要把& quot/静态/../img . JPEG & quot；在路径url之前