CSS Django在css文件中使用background-image的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39769469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The way to use background-image in css files with Django
提问by yamachan
I'd like to use an image file as a background-image on Django. But I do not know how.
First, I read thisand tried to write like following this in a css file.
我想使用图像文件作为Django. 但是我不知道怎么做。首先，我读了这个并尝试在 css 文件中像下面这样写。
#third{
background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
color: white;
height: 650px;
padding: 100px 0 0 0;
}
But this does not work.
但这不起作用。
{% load staticfiles %}
#third{
background: url({% static "img/sample.jpeg" %}) 50% 0 no-repeat fixed;
}
and
和
#third{
background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;
}
don't work, too.
也不行
How do you usually write css file when you use background-image on css files? Would you please give me some advices?
在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 version: 1.9.2
Django 版本：1.9.2
回答by Prakhar Trivedi
Use this:
用这个：
#third{
background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
color: white;
height: 650px;
padding: 100px 0 0 0;
}
Most probably This will work.Use "/static/" before your image URL and then try them. Thanks
这很可能会起作用。在您的图像 URL 之前使用“/static/”，然后尝试它们。谢谢
回答by LuKs Sys
Make sure that django.contrib.staticfilesis included in your INSTALLED_APPS.
确保它django.contrib.staticfiles包含在您的 INSTALLED_APPS 中。
In you settings.py file define STATIC_URL: STATIC_URL = '/static/'
在 settings.py 文件中定义 STATIC_URL： STATIC_URL = '/static/'
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>
or
或者
#third{
background: url('{{ STATIC_URL }}my_app/example.jpg'
}
回答by Simas
For some reasons, which I cannot explain the accepted answer did not worked out for me. (I wanted to use a picture as a cover image for the whole body).
由于某些原因，我无法解释接受的答案对我不起作用。（我想用一张图片作为全身的封面图片）。
However, here is the alternative that has worked for me for anyone that might be useful for someone that will come across.
但是，这里有一个对我有用的替代方法，它可能对遇到的人有用。
In a css file, which is located in the static file directory, I have wrote the following:
在位于静态文件目录中的 css 文件中，我编写了以下内容：
CSS:
CSS：
body {
background: url(../main/img/picture-name.jpg);
}
You do not have to include *'{% load static %}'*in your css file.
您不必包含*'{% load static %}'*在您的 css 文件中。
HTML:
HTML：
include
{%load static%}at the topcreate a link href to style, as below.
<link href='{% static "/main/home.css" %}' rel='stylesheet' type='text/css'>
包括
{%load static%}在顶部创建一个链接 href 样式，如下所示。
<link href='{% static "/main/home.css" %}' rel='stylesheet' type='text/css'>
回答by Abdullah Tahir
background-image: url('{% static '.jpg' %}');
回答by kinGKong
In case there's anyone looking for another way to solve this, you may want to hot-link the image from your server or any image hosting service you have access to. Here's how I solved this:
如果有人正在寻找其他方法来解决此问题，您可能希望从您的服务器或您有权访问的任何图像托管服务热链接图像。这是我解决这个问题的方法：
- Upload the image in an image hosting site or your server (try Drive/Dropbox)
- Right click and open the image in a new tab to access the image URL
- Copy the image URL with the (.jpeg, .png) extension and paste in your HTML doc.
- 在图像托管站点或您的服务器中上传图像（尝试 Drive/Dropbox）
- 右键单击并在新选项卡中打开图像以访问图像 URL
- 复制带有 (.jpeg, .png) 扩展名的图像 URL 并粘贴到您的 HTML 文档中。
Here's an example:
下面是一个例子：
https://images.your-host.com/photos/image-path-here.jpeg
https://images.your-host.com/photos/image-path-here.jpeg
