Question

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

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

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

Answer 1

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

Answer 2

You can move any CSS that contains static file paths to inline CSS, contained in the template.

i.e.

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

The catch here is that it won't work for @media queries, you'd need to put those in a block, e.g.

<style>
    @media (min-width: 1200px){
       background: url('{% static 'logo.png' %}');
    }
</style>

Answer 3

请参阅this similar stackoverflow question。

做你想做的事的唯一方法是通过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的rubygem。它可以让您轻松地从命令行轻松创建，启用，禁用和删除自定义主机。

Answer 4

如果要在CSS文件中使用{% static %}标签，则应使用{％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 %}标签，而不会出现任何问题。

Answer 5

可能有办法让django像处理模板一样处理CSS文件（我对django不是很熟悉），但你可能想尝试不同的解决方案：使用动态样式表语言，例如{{3 }或LESS。使用LESS就像

一样简单

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

#logo {
    background: url(%("%s/logo.png", @base))
}

Answer 6

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

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

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

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

Answer 7

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

settings.py：

STATIC_URL = '/static/'

style.css：

background-image: url('/static/img/sample.jpg');

Answer 8

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

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

通常他们比我所展示的那个长一点。你可以使用javascript生成它们，你可以找到一些在线生成器。

如何在我的css文件中引用静态文件？

8 个答案: