Django CMS 动态图像

Posted 2023-02-24

【中文标题】Django CMS 动态图像

【英文标题】：Django CMS dinamically image

【发布时间】：2021-02-17 13:00:28

【问题描述】：

我需要在 django cms 中从主页更改动态图像背景图像 css，但这是不可能的。

home

CSS 代码

css有welcome-image-area类，用户需要更改cms中的图片url。

.welcome-area 
    height: 100%;


.welcome-image-area 
    position: relative;
    height: 100%;
    background-image: url(../images/bg/bg.jpg); 
    background-size: cover;
    z-index: 1;


.welcome-image-area:after 
    position: absolute;
    background: rgba(0, 0, 0, .7);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;

html 代码

base.html

  <div id="welcome-image-area" class="welcome-image-area" data-stellar-background-ratio="0.6" >
              <div class="display-table">
                  <div class="display-table-cell">
                      <div class="container">
                          <div class="row">
                              <div class="col-md-12 text-center">
                                  <div class="header-text">
                                      <h2>% static_placeholder 'mensaje bienvenida' %</h2>
                                      <p>% static_placeholder 'sub mensaje bienvenida' %</p>
                                      <a class="smoth-scroll hire-us-slide-btn" href="#service">Servicios <i class="fa fa-hand-pointer-o btn-hire-us" aria-hidden="true"></i></a>
                                      <a class="slide-btn smoth-scroll" href="#contact">Contactanos <i class="fa fa-hand-pointer-o btn-contact-us" aria-hidden="true"></i></a>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

【参考方案1】：

在这些情况下，我建议使用“样式”属性，如下所示：

<div class="welcome-image-area" style="background-image: url( instance.image.url )"></div>