Question

这是我的Django项目的结构 -

src/
    login_manager/
        migrations/
            ....
        __init__.py
        admin.py
        apps.py
        models.py
        views.py
        tests.py
        urls.py
    port/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    static/
        admin/
            .....
    templates/
        login_manager/
            login.html
            .....
        __base.html
    media/
        image/
            containers.jpg
    manage.py
requirements.txt

此处，我的项目名称为端口。此项目下有一个名为 login_manager 的应用程序。我正在尝试为 __ base.html 模板添加背景图片。但由于某些原因，它失败了。

这是我的 __ base.html -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GPSL Inventory Management</title>
    <meta name="viewport" content="width=device-width,
        initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--styles-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css">
    <style type="text/css">
        body { 
         background: url('{{ MEDIA_URL }}image/containers.jpg') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }

        .panel-default {
          opacity: 0.9;
          margin-top:30px;
        }

        .form-group.last {
          margin-bottom:0px;
        }

        .container{
          margin: 0 auto;
        }
     </style>
    {% block extrahead %}
    {% endblock %}
</head>

<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

我已在 settings.py -

中注册了我的媒体网址

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

如何在父模板中生成背景图像？

编辑1：图片是静态的。

Answer 1

由于背景图片是静态文件，因此您应该使用静态网址而不是媒体。

{% load staticfiles %}

<style type="text/css">
        body { 
         background: url('{% static "image/containers.jpg" %}') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }
</style>

您可以在相关Django docs: Managing static files中详细了解相关内容。

Django tutorial中的静态文件也有很好的参考。

除了服务器生成的HTML之外，Web应用程序通常还需要提供呈现完整网页所需的其他文件（如图像，JavaScript或CSS）。在Django中，我们将这些文件称为“静态文件”。

为了正确设置静态服务，需要特别小心，但文档非常清晰，并且在SO上也有很多相关问题。

另一方面，媒体网址涉及用户上传的文件，您可以在此relevant documentation中阅读。

在Django中设置基本模板中的背景图像

1 个答案: