【问题标题】:how to add background in Django2.0 using html or css如何在Django2.0中使用html或css添加背景
【发布时间】:2018-05-14 01:11:39
【问题描述】:

我想在我的 django 主页中添加一个图像,但我总是无法获得我想要的图像文件的正确位置(黄色高亮) 下图是我目前输入的内容:

https://i.stack.imgur.com/ecyQu.png

也在同一个文件中

{% load static %}
        body {
            background-image: url('{% static "/bitcoin.jpg" %}');
        }

每当我想在 Django2.0 中插入图像时,是否需要静态?还, 我看到有些人打开单独的静态文件,有些人将图像放入模板中。我很困惑我应该放在哪里?怎么把背景图片放到html里面??

谢谢你的回答!!!!

更新 ** 这是我目前所拥有的 enter image description here

updat2 ** 仅指管理文件, enter image description here

【问题讨论】:

    标签: html css django static


    【解决方案1】:

    您可以仅针对这种情况使用内联 CSS。你已经有一个.wrapper 元素,所以如果你想放置一个静态的图片,你可以这样做:

    <div class="wrapper" style="background-image: url('{% static 'default_page/bitcoin.jpg' %}');">
       Your content here
    </div>
    

    如果您想在 CSS 文件中使用,只需根据您的静态配置使用绝对路径即可。如果您使用 /static 提供静态文件(这意味着路径 /static/default_page/bitcoin.jpg 是正确的并显示您想要的图像),您可以在 CSS 中输入如下内容:

    body {
      background-image: url('/static/default_page/bitcoin.jpg');
    }
    

    希望有效!

    编辑:

    正如 Thomas 所说,您将图像放置在错误的文件夹中(在模板中,而不是在您的静态文件文件夹中)。请参阅this 以正确配置您的项目。

    【讨论】:

    • 我还是有问题,静态文件只指管理文件(见我的update2图片)。为什么它不引用我的静态/img/??
    • 您必须在项目文件夹中添加静态文件夹,您的应用程序(如default_page)所在的位置,然后将STATICFILES_DIRS 添加到您的项目设置中,参见here。如果您按照我刚刚链接的页面上给出的教程进行操作,它将起作用。希望对您有所帮助,如果您需要更多帮助,请在此处发布。
    • 我知道原因。我正在使用 PyCharm 并且有一个错误,它无法读取我的静态文件。 =[我理解你的概念,谢谢你 Vanessa x100!
    【解决方案2】:

    您已将 bitcoin.jpg 与模板放在同一文件夹中。 Django 提供静态目录中的所有静态文件,例如图片。只有模板进入模板目录。在您的主页应用程序中创建一个名为 static 的目录,在该目录中创建一个名为 default_page 的目录,并将您的背景图像放在那里。重新启动开发服务器,您的图像应该会出现。

    【讨论】:

    • 它在我的页面中返回一个 x-image :( 你知道为什么会这样吗? 它的格式对吗?我输入了 static>default_page>bitcoin.jpg
    • 错误:[13/May/2018 19:28:01] "GET /static/bitcoin.jpg HTTP/1.1" 404 1657 Not Found: /bitcoin.jpg
    • 看起来确实正确。您是否在设置中设置了 statcfiles 目录?
    • 我知道原因。我正在使用 Pycharm 来实现 Django。 Pycharm 有一个错误,它无法读取我的静态文件。无论如何,谢谢你!
    猜你喜欢
    • 2020-07-20
    • 2020-10-18
    • 1970-01-01
    • 2022-01-09
    • 1970-01-01
    • 2018-06-02
    • 2021-09-05
    • 1970-01-01
    相关资源
    最近更新 更多