51

我的 CSS 文件中有一个引用静态图像的引用： 

#logo
{
  background: url('/static/logo.png')
}

这在我的开发机器上工作得很好，但在我的生产环境上却不行，因为 url 应该是 static.mydomain.com/logo.png。如何根据设置文件中的 STATIC_URL 动态更改 css 文件？

4

9 回答 9

43

使用相对路径。相对于 css 文件所在的文件夹

于 2011-05-05T13:55:01.027 回答
23

您可以将包含静态文件路径的任何 CSS 移动到模板中包含的内联 CSS。

IE

<div style="background: url('{% static 'logo.png' %}')"></div>

这里的问题是它不适用于@media 查询，您需要将它们放在一个块中，例如

<style>
    @media (min-width: 1200px){
       background: url('{% static 'logo.png' %}');
    }
</style>
于 2016-07-11T23:01:31.583 回答
15

如果你想{% static %}在你的 CSS 文件中使用标签，你应该使用 {% include %} 标签。这是一个这样做的例子：

foo.html

{% load static %}
{% load i18n %}
{% load widget_tweaks %}

<!DOCTYPE html>
<html>
<head>
    <style>
        {% include "path/to/custom_styles_1.css" %}
    </style>
    <link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>

custom_styles_1.css

{% load static%}

{
     background: url('{% static "/img/logo.png" %}')
}

custom_styles_2.css

.fa {
    position: relative;
    text-align: center;
    font-family: BTitrBold;
    font-size: 3.5em;
}

.name {
    position: absolute;
    top: 37%;
    right: 15%;
}

.school {
    position: absolute;
    top: 530px;
    right: 200px;
}

.id {
    position: absolute;
    top: 700px;
    right: 200px;
}

.degree {
    position: absolute;
    top: 740px;
    left: 195px;
}

custom_styles_1.css是包含{% static %}标签的 CSS 文件。您应该将它与带有{% include %}标签的 foo.html 文件集成。这样，Django 会将你需要的所有样式放在适当的位置，并正确渲染静态标签。

custom_styles_2.css是一个位于STATIC_ROOT目录中的普通 CSS 文件，因此您可以{% static %}毫无问题地使用标签。

于 2018-06-24T13:54:18.807 回答
15

使用基目录中的绝对 URL，这将指向应用程序内静态文件夹中的任何文件

设置.py：

STATIC_URL = '/static/'

样式.css：

background-image: url('/static/img/sample.jpg');
于 2019-11-21T09:58:34.237 回答
5

请参阅这个类似的 stackoverflow 问题。

做你想做的事情的唯一方法是通过 Django 生成你的 CSS。HTML 通常与 Django 视图和模板相关联，但实际上，您可以返回任何文件类型：CSS、JavaScript、纯文本等。但是，这样做会增加站点的开销，因此请设置正确的 HTTP 标头和服务器端生成文件的缓存将非常重要。

基本方法：

return render_to_response('stylesheet.css',
    { 'domain': 'http://static.mydomain.com/' },
    context_instance=RequestContext(request),
    mimetype='text/css'
)

或者，您可以在系统上设置主机，将静态域映射回 localhost 以用于开发目的。然后，您可以正常引用该域，但它仍会从您的开发文件中提取。此外，如果您的系统上碰巧安装了 Ruby，您可以使用名为 Ghost 的 ruby​​gem。它使您可以直接从命令行轻松创建、启用、禁用和删除自定义主机，而无需大惊小怪。

于 2011-05-05T15:01:56.910 回答
4

如果您使用 django-libsass 生成 css，则可以使用自定义函数来桥接 django 和 sass 预编译器。

事实上，该功能static已经实现，您可以使用它：

.foo {
    background: url(static("myapp/image/bar.png"));
}

如此处所述： https ://github.com/torchbox/django-libsass#custom-functions

于 2018-08-03T12:38:54.140 回答
3

可能有一种方法可以让 django 将 CSS 文件视为模板（我对 django 不是很熟悉），但您可能想尝试不同的解决方案：使用动态样式表语言，例如LESS或Sass。使用 LESS，它就像

@base: "//static.example.com/"

#logo {
    background: url(%("%s/logo.png", @base))
}
于 2011-05-05T14:01:29.320 回答
0

好吧，10 年后，我现在正面临这个问题。这是我的修复程序，它将为您节省一些麻烦。

PS 不确定这是否合乎道德

  • 获取您的 CSS 文件并将其放在模板中

在你的html档案中，

<style>
     {% include 'path/to/css' %}
</style>

解决了我的问题。

于 2022-02-19T21:32:28.047 回答
-6

如果您的图像不是太大，您可以使用数据 URI，它可以直接嵌入到 css 文件中而无需任何链接。它们看起来像这样：

.box-with-background {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
  background-repeat: repeat;
}

通常它们比我展示的要长一些。您可以使用 javascript 生成它们，并且可以找到一些在线生成器。

于 2018-01-07T17:22:21.830 回答