logo标签列表

Django CSS 背景图片

htmlcssdjangodjango-templates
7

我的CSS文件能够正常工作，但我无法添加背景图像。我尝试了3种方法，但没有成功。

这是我的style.css

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

这是我的base.html（图片可以正常显示）

{% 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文件，其中有一个名为"first-info"的类。
{% 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' %}")更改为background-image: url("img/bg.jpg");，但它无法正常工作。
可能是 为什么 CSS 中的 background:url 在 Django 中不起作用？ 的重复问题。 - Alexander Tyapkov
8个回答
17

这是预期的行为。Django模板引擎在渲染HTML模板时会填充所有变量，但不会填充包含在HTML中的CSS文件中的值。

因为{% static 'img/logo1.png' %}将被替换为类似于/static/img/logo1.png的内容，所以您的base.html文件能够找到图片并加载它，并将其呈现出来。

如果您想使背景图像动态化，则可以采取以下方法之一。

您可以直接在模板中添加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/

或者，您可以在CSS文件中直接输入完整路径。不过，这会移除动态行为，也就是您的静态路径。我假设它只是/static/。

.first-info{
    width: 100%;
    height: 300px;
    background-image: url( '/static/img/bg.jpg' );
}
2
尝试这个：
背景图片：url（'{{ STATIC_URL }}/img/bg.jpg'）;
2
晚了一些，但我想与那些试图动态加载背景图片的人分享这个。我的例子是在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;
}
0

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

你的CSS是静态文件，如果想要它可扩展，应该通过某种管理命令进行处理并包含URL。

否则，只需使用URL路径即可。

你能否更详细地向我解释一下？ - Krystian Kazimierczak
例如 https://github.com/andreyfedoseev/django-static-precompiler - iklinac
0

图片必须放在 static/app/images/ 目录下，.css 文件必须位于 static/app/content/ 目录。

在 .css 文件中进一步编写如下内容：

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

只需将静态内容中的'..'替换即可。

这样可以解决以下问题：

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

添加这个

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接