Как ссылаться на статические файлы в моих файлах css?

У меня есть ссылка внутри моего файла CSS, которая ссылается на статическое изображение:

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

это отлично работает на моей машине dev, но не в моей рабочей среде, так как url-адрес должен быть static.mydomain.com/logo.png - ... Как динамически изменить файл css в соответствии с STATIC_URL в файле настроек?

30
django django-static

8 ответов

используйте относительный путь. Относительно папки, в которой находится файл css

27

вы можете переместить любой CSS, содержащий статические пути к файлам, во встроенный CSS, содержащийся в шаблоне.

то есть

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

улов здесь в том, что он не будет работать для запросов @media, вам нужно будет поместить их в блок, например

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

посмотреть этот аналогичный вопрос stackoverflow.

единственный способ сделать то, что вы хотите, - создать CSS через Django. HTML обычно связан с представлениями и шаблонами Django, но на самом деле вы можете вернуть любой тип файла: CSS, JavaScript, обычный текст и т. д. Тем не менее, это добавит накладные расходы на ваш сайт, поэтому настройка правильных HTTP-заголовков и серверного кэширования сгенерированного файла будет очень важно.

Basic метод:

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

кроме того, вы можете настроить хосты в вашей системе, которые сопоставляют статические домены с localhost для целей разработки. Затем вы можете ссылаться на домен как обычно, но он все равно будет извлекаться из ваших файлов разработки. Кроме того, если у вас установлен Ruby в вашей системе, вы можете использовать rubygem под названием Ghost. Это позволяет легко создавать, включать, отключать и удалять пользовательские хосты из командной строки без суеты.

3

если вы хотите использовать {% static %} тег в файле CSS вы должны использовать тег {% include%}. Вот пример этого:

фу.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 это файл CSS, который включает {% static %} - тег. Вы должны интегрировать его с вашим фу.HTML-файл с {% include %} тег. Таким образом, Django поставит все стили, которые вам нужны в соответствующем месте и правильно отображать статические теги.

custom_styles_2.css это обычный файл CSS, расположенный в , так что вы можете использовать {% static %} tag для него без каких-либо проблем.

3

возможно, есть способ заставить django обрабатывать CSS-файл как шаблон (я не очень хорошо знаком с django), но вы можете попробовать другое решение: использовать динамический язык таблиц стилей, такой как меньше или Сасс. С меньшим это было бы так же просто, как

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

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

Если вы используете django-libsass для создания css, вы можете использовать пользовательские функции для моста django и Sass precompiler.

на самом деле, функция static это уже реализовано, и вы можете использовать его:

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

как описано здесь: https://github.com/torchbox/django-libsass#custom-functions

1

Если ваши изображения не слишком большие, Вы можете использовать URIs данных, которые могут быть встроены прямо в файл css без каких-либо ссылок. Они выглядят так:

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

обычно они немного длиннее, чем тот, который я показал. Вы можете генерировать их с помощью javascript, и вы можете найти некоторые онлайн-генераторы.

-1

рекомендуется использовать относительный путь к вашему статическому активу в файле css.

body {
    background: white url("images/background.gif") no-repeat right bottom;
}
-1