Django css 背景图像答案

【问题标题】：Django css background-imageDjango css 背景图像
【发布时间】：2017-06-22 02:26:51
【问题描述】：

我的 css 文件正在运行，但我无法添加 bacgorund 图像。我尝试了 3 种方法，但不起作用。

这是我的 style.css

.first-info{
    width: 100%;
    height: 300px;
    background-image: url( "{% static 'img/bg.jpg' %}");
}

这是我的 base.html（img 正在工作）

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}VPW{% endblock %}</title>



    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <script href="{% static 'js/bootstrap.js' %}"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
    <div class="row head">
        <div class="col-md-12">
            <div class="col-md-4">
            </div>
            <div class="col-md-4 logo">
                <img src="{% static 'img/logo1.png' %}">
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>

这是我的 main.html，我有类第一信息。

{% extends "shop/base.html" %}
{% load static %}

{% block title %}VPW{% endblock %}

{% block content %}
    <div class="container-fluid">
    <div class="row first-info">
        <div class="col-md-4">
            <div class="box">
                Lorem Ipsum 
            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
    </div>
    </div>

{% endblock %}

我尝试更改 css background-image: url("{% static 'img/bg.jpg' %}");到背景图像：url（“img/bg.jpg”）；但不要这样做

【问题讨论】：

Why is background:url in CSS not working with Django?的可能重复

标签： html css django django-templates

【解决方案1】：

这是预期的行为。 Django 模板引擎在渲染 html 模板时填充所有变量。它不会在您的 html 中包含的 css 文件中填充值。

您的 base.html 因为 {% static 'img/logo1.png' %} 被替换为 /static/img/logo1.png 之类的东西，并且浏览器能够找到图像、加载它并呈现它。

如果您想让背景图像动态化，您可以选择 .

您可以直接在模板中添加 css 类，即

{% extends "shop/base.html" %}
{% load static %}

{% block title %}VPW{% endblock %}
 <style>
.first-info{
    width: 100%;
    height: 300px;
    background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
    <div class="container-fluid">
    <div class="row first-info">
        <div class="col-md-4">
            <div class="box">
                Lorem Ipsum 
            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
    </div>
    </div>

{% endblock %}

或者直接在你的 html 标签中使用内联 css。

<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >

或者只需在您的 css 文件中硬编码完整路径即可。但它消除了动态行为，即您的静态路径。我假设它只是/static/

.first-info{
    width: 100%;
    height: 300px;
    background-image: url( '/static/img/bg.jpg' );
}

【讨论】：

【解决方案2】：

试试这个：

背景图片:url('{{ STATIC_URL }}/img/bg.jpg');

【讨论】：

【解决方案3】：

迟到的答案，但我想与尝试动态加载背景图像的人分享。我的示例是呈现在views.py 中生成的数据库请求。该请求包含三个元素：background.photo、background.title 和 background.body。虽然没有必要，但我想对照片应用不透明度；但是，使用 opacity 属性会将效果应用于 DOM 中元素的所有子元素，因此我使用 rgba 将效果隔离到照片上。文字被覆盖而不受照片不透明度的影响。为了使文字突出，我使用了水平渐变使左侧的照片变暗。

    {% extends 'base_layout.html' %}

{% block content %}
<div class="background-image" style="background: url({{ background.photo.url }} ) no-repeat; background-size: 100%;">
    <div class="container">
        <h2 class="title-text">{{ background.title }}</h2>
        <p class="body-text">{{ background.body }}</p>
    </div>
</div>
{% endblock %}

还有css：

.container{
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,0));
}

.background-image{
    margin: 1em;
    border-style: solid;
    border-width: 1px;
    border-color: #ff0080;
}

.title-text{
    font-family: serif;
    color: #ff0080;
    margin: 0;
    padding: .5em 1em;
}

.body-text{
    font-family: serif;
    color: #ff0080;
    margin: 0;
    padding: 1.5em 4em;
}

【讨论】：

【解决方案4】：

Django 不处理 .css 文件，只包含渲染 html 模板。

您的 CSS 是静态文件，如果您希望它是可扩展的，则应该通过处理某种管理命令来包含 url。

否则只使用url的路径

【讨论】：

你能给我解释一下吗
例如github.com/andreyfedoseev/django-static-precompiler

【解决方案5】：

只需将静态替换为'..'。它会解决：

background:url('../images/Course.jpg');

【讨论】：

【解决方案6】：

图片必须在static/app/images/，.css 文件必须在static/app/content/。

在.css文件中进一步这样写：

#home {
  background: url(../images/1.jpg);
}

【讨论】：

【解决方案7】：

这对我有用：

<style="background-image: url({% static 'images/cover.jpg' %})">

来源： https://simpleit.rocks/python/django/call-static-templatetag-for-background-image-in-css/

【讨论】：

【解决方案8】：

.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }
  .wrapper {
  display: grid;
}

添加这个

【讨论】：