Question

我的css文件正在运行，但我无法添加bacgorund图片。我尝试了三种方式，但没有工作。

这是我的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（＆＃34; {％static＆＃39; img / bg.jpg＆＃39;％}＆＃34;）; to background-image：url（＆＃34; img / bg.jpg＆＃34;）;但是没有工作

Answer 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' );
}

Answer 2

试试这个：

background-image：url（'{{STATIC_URL}} / img / bg.jpg'）;

Answer 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;
}

Answer 4

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

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

Othewise只使用url的路径

Answer 5

只需用'..'替换为static。它将解决：

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

Answer 6

图像必须位于static/app/images/中，.css文件必须位于static/app/content/中。

.css文件中的进一步内容如下：

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

Answer 7

这对我有用：

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

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

Answer 8

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

添加此

Django css背景图像

8 个答案: