使用 jinja 更改 css 中的 url 指针

Posted 2023-02-24

【中文标题】使用 jinja 更改 css 中的 url 指针

【英文标题】：Use jinja to change url pointer in css

【发布时间】：2021-05-29 13:16:33

【问题描述】：

我正在使用 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' 的事情

【问题讨论】：

也许不是渲染成css（在我看来应该是静态的），更简单的解决方案是渲染像class="jumbotron jumbotron-fluid background_class "这样的类，并为不同的背景图像设置两个不同的css类？

【参考方案1】：

在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中确保图像路径设置为相关路径

【参考方案2】：

你可以编写内联css，例如你可以像下面这样改变coverNytorv div

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

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

【讨论】：

感谢您的评论。我无法让它工作。我尝试时页面是空白的。我也试过 style="background-image: url('media/image.jpg');"使用硬编码，我只看到灰色背景，但看不到图像

您是否在浏览器中检查过控制台？这可能与 django 无法检测到您的文件有关。您可以使用静态标签！