为啥 CSS 中的 background:url 不能与 Django 一起使用?

Posted

技术标签:

【中文标题】为啥 CSS 中的 background:url 不能与 Django 一起使用?【英文标题】:Why is background:url in CSS not working with Django?为什么 CSS 中的 background:url 不能与 Django 一起使用? 【发布时间】:2011-12-22 19:45:46 【问题描述】:

我的导航栏有以下 CSS 代码:

#footer-navigation 
  background: #1841c8 url('../images/nav_background.gif');
  height: 40px;
  padding: 0 0 0 20px;

但是,当我启动本地开发服务器时,即使图像存在于该位置,它也会为我提供以下信息:

"GET /images/nav_background.gif HTTP/1.1" 404 1795

我正在运行 Django 1.3.1,并且正在使用 django.views.static.serve。

【问题讨论】:

我很确定图像不在 /images/nav_background.gif 上然后... 我错过了您在请求图像时收到 404。如果你去 localhost:8000/images/nav_background.gif 图片会显示吗? 我检查了它并没有显示出来。这是一个命名错误。 images 文件夹中的文件名是“-”而不是“_”。 【参考方案1】:
"GET /images/nav_background.gif HTTP/1.1" 404 1795

找不到您要使用的图像。我建议您按照以下步骤操作:

您可以尝试以下步骤:

    打开你的 settings.py 和

    在文件的第一行添加:

    import os.path
    

    将您的 STATIC_ROOT 的值更改为:

    STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')
    

    将您的 STATIC_URL 的值更改为:

    STATIC_URL = '/static/'
    

    在您的项目根目录中创建一个名为“static”的文件夹。

    为您的静态文件(如 css、javascript 等)创建一个文件夹。我建议您为不同类型的文件使用不同的文件夹。

    打开项目的 urls.py

    将此添加到您的导入中:导入设置

    将此添加到 url 模式:

    (r'(?:.*?/)?(?P<path>(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', 'document_root': settings.STATIC_ROOT ),
    

    注意:在此示例中,我的静态文件夹中有名为 css、jquery、jscripts 和 images 的文件夹。

    在您的模板中添加:

对于 css 文件:(在本例中,default.css 是 css 文件的名称)

<link href="/ STATIC_ROOT css/default.css" rel="stylesheet" type="text/css" media="all" />

对于 javascript:

<script type="text/javascript" src="/ STATIC_ROOT jquery/jquery.js"></script>

然后将您的代码更改为:

#footer-navigation 
background: #1841c8 url(images/nav_background.gif);
height: 40px;
padding: 0 0 0 20px;
                   

【讨论】:

请注意,在 Django11 中,第 4 点将不起作用,因为不允许使用 'django.views.static.serve'。改为:from django import views as django_viewsurl(r'(?:.*?/)?(?P&lt;path&gt;(css|jquery|jscripts|images)/.+)$', django_views.static.serve, 'document_root': settings.STATIC_ROOT ),【参考方案2】:

尝试在您的设置中将MEDIA_ROOT 设置为图像所在的位置,然后使用

MEDIA_URL nav_background.gif

编辑:

Jakub Gocławski 是对的。您的问题似乎是图像在您认为存在的地方不存在。如果您仍然遇到问题,请告诉我们您在访问 localhost:8000/ 时会得到什么。

【讨论】:

我认为问题是关于 CSS 文件,而不是 Django 模板。 MEDIA_ROOT 在 CSS 文件中不起作用。

以上是关于为啥 CSS 中的 background:url 不能与 Django 一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

css background-image 显示不到 为啥

CSS里的background url怎么设置呢?

css布局时,为啥fixed定位元素设置width:100%会超出父容器的右侧

background:url()不显示 总结

外联css样式表中应该如何 写background-image: url()中的图片路径呢 ? 这里我对相对路径不是很明白。把一

使用css的background:url设置背景图方法