使用 jinja 更改 css 中的 url 指针

Question

我正在使用 Django 构建网站，我想在两个网站上使用相同的模板，但更改背景颜色。

目前在我的 html 我有

<section>
    <div class="jumbotron jumbotron-fluid" id ="coverNytorv">
        <div class="container-fluid">
        
            <nav class="navbar navbar-expand-md" id ="navbar">
                <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link px-5" id ="mainNavlink" href="#anchor_locations">LOCATIONS<span class="sr-only">(current)</span></a>
                            </li>
    
                            <li class="nav-item active">
                                <a class="nav-link px-5" id ="mainNavlink" href="#anchor-aboutUs">ABOUT US<span class="sr-only">(current)</span></a>
                            </li>
    
                            <li class="nav-item active">
                                <a class="nav-link px-5" id ="mainNavlink" href="#anchor-mainContact">CONTACT<span class="sr-only">(current)</span></a>
                            </li>
                        </ul>
                    </div>
            </nav>
        </div>
    </div>
</section>

在对应的css我有

#coverNytorv {
    text-align: center; 
    align-items: center;
    background: url("media/cover.jpg") no-repeat center center;
    background-size: cover;
    min-height: 100%;
    justify-content: center;
    color: white;
    height: 700px;
    display: flex;
    margin-bottom: 0px;
}

我想更改 view.py 中的背景图片。 css 中的 background 应该是什么样子，以便我可以将路径变量从 view.py 传递到背景图像？我想象 css background 中的 {{ imagePath }}，然后在我的 view.py 中我可以做 context = {'imagePath' : 'url_path_to_my_image'}

Answer 1

您可以内联 css，例如您可以像下面这样更改封面 Nytorv div

 <div class="jumbotron jumbotron-fluid" id ="coverNytorv" style="background: url("'{{imagePath}}'")">

就这么简单！也不要忘记从您的样式中删除背景线以避免任何混淆..

Answer 2

在html

<div class="jumbotron jumbotron-fluid" id ="coverNytorv" style="background-image: url({{imagePath}});">

在css

#coverNytorv {
    text-align: center; 
    align-items: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 100%;
    justify-content: center;
    color: white;
    height: 700px;
    display: flex;
    margin-bottom: 0px;
}

然后在views.py中确保图片路径设置为相关路径

使用 jinja 更改 css 中的 url 指针

Use jinja to change url pointer in css

django

django-templates

jinja2

django-views