问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Django css 背景图片

社区维基
1
新手上路，请多包涵

我的 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”);但不要工作

原文由 Krystian Kazimierczak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssdjangodjango-templates
阅读 685
2 个回答
得票最新
社区维基
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' );
}

原文由 Bipul Jain 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

迟到的答案，但我想与尝试动态加载背景图像的人分享这个。我的例子是呈现在 views.py 中生成的数据库请求。该请求包含三个元素：background.photo、background.title 和 background.body。虽然没有必要，但我想对照片应用不透明度；但是，使用不透明度属性会将效果应用于 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;
}

原文由 BusterT 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题