背景图像在 Django 中无法正确呈现答案

【问题标题】：Background image not rendering correctly in Django背景图像在 Django 中无法正确呈现
【发布时间】：2021-01-05 21:43:06
【问题描述】：

我正在使用 Django 2 开发一个项目。我在模板中有一个 base.html：

{% block removable-pagetop %}
      <div class="showcase">
        <div class="showcase-content-top">
          {% block page-title %}{% endblock %}
          <p>{% block page-subtitle %}{%endblock %}</p>
        </div>
        {% block button-list %}
        <div class="showcase-content-buttons">
          <ul>
            <li>{% block button1 %}{% endblock %}</li>
            <li>{% block button2 %}{% endblock %}</li>
            <li>{% block button3 %}{% endblock %}</li>
            <li>{% block button4 %}{% endblock %}</li>
          </ul>
        </div>
        {% endblock %}
      </div>
      {% endblock %}

背景图片的 CSS 是：

.showcase {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/static/img/vg_home.jpeg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

我的 index.html 是：

{% extends 'base.html' %}
{% load static %}

{# Page/Tab Title #}
{% block title %}Video Games | Home{% endblock %}

{# Navbar with video game theme icon #}
{% block navbar %}
<header>
  <nav class="nav-wrapper">
    <div class="logo">
      <a href="{% url 'index' %}">
        {% block nav-icon %}<img src="{% static 'img/vg_icon.png' %}">{% endblock %}
      </a>
    </div>
    <ul class="menu">
      <li><a href="{% block home-button %}{% url 'index' %}{% endblock %}">Home</a></li>
      <li><a href="{% block about-button %}{% url 'about' %}{% endblock %}">About</a></li>
    </ul>
  </nav>
</header>
{% endblock %}

{% block removable-pagetop %}
<div class="showcase">
  <div class="showcase-content-top">
    {% block page-title %}<h1>Vide<span class="text-color">o</span><span id="wave"></span>
      <span id="wave2"></span> Games</h1>{% endblock %}
    <p>{% block page-subtitle %}Play <span class="separator">|</span> Eat
      <span class="separator">|
      </span> Sleep <span class="separator">|</span> Repeat{%endblock %}</p>
  </div>
  {% block button-list %}
  <div class="showcase-content-buttons">
    <ul>
      <li>{% block button1 %}<a href="{% url 'library' %}" class="contact-btn">Library</a>{% endblock %}</li>
      <li>{% block button2 %}<a href="{% url 'search' %}" class="contact-btn">Search</a>{% endblock %}</li>
      <li>{% block button3 %}<a href="{% url 'news' %}" class="contact-btn">News</a>{% endblock %}</li>
      <li>{% block button4 %}<a href="{% url 'about' %}" class="contact-btn">About</a>{% endblock %}</li>
    </ul>
  </div>
  {% endblock %}
</div>
{% endblock %}

{# Optional JavaScript from base.html #}
{%  block javascript %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/masonry.js' %}"></script>
<script src="{% static 'js/slick.min.js' %}"></script>
<script src="{% static 'js/scripts.js' %}"></script>
<script>
  var scene = document.getElementById('scene');
</script>
{%  endblock %}

图像显示在 VS Code 的取景器中，我什至可以直接从我在 background-image 属性的 URL 值字段中键入的链接链接到它。即使在 Chrome Inspect 工具中，如果我将鼠标悬停在 URL 路径上，它也会显示一些正确图像的 sn-p。但是，我的屏幕在图像应该出现的地方呈现白色。当我为我的页脚不停留在页面底部实施修复时，这种情况就开始发生了。

以下是页面的外观和修复的 HTML：

<body>

  <!-- Navbar -->
  {% include 'partials/_navbar.html' %}

  <!-- Page Top -->
  {% block page-container %}
  <div id="html-container">
    <div id="main">

      {% block removable-pagetop %}
      <div class="showcase">
        <div class="showcase-content-top">
          {% block page-title %}{% endblock %}
          <p>{% block page-subtitle %}{%endblock %}</p>
        </div>
        {% block button-list %}
        <div class="showcase-content-buttons">
          <ul>
            <li>{% block button1 %}{% endblock %}</li>
            <li>{% block button2 %}{% endblock %}</li>
            <li>{% block button3 %}{% endblock %}</li>
            <li>{% block button4 %}{% endblock %}</li>
          </ul>
        </div>
        {% endblock %}
      </div>
      {% endblock %}



      <!-- Page Content -->
      <section class="main_content">
        {% block appcontent %}{% endblock %}
      </section>

    </div>
  </div>
  {% endblock %}
  <!-- Footer -->
  {% include 'partials/_footer.html' %}

  <!-- Optional JavaScript -->
  {%  block javascript %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  <script src="{% static 'js/scripts.js' %}"></script>
  {%  endblock %}

</body>

我有一个容器 div 和一个主 div，它可以在添加内容时将页脚向下推到底部。如果我删除这些照片会显示，但页脚会从底部出现。即使我将页脚设置为固定，底部 0。

感谢任何帮助。谢谢！

CSS：

* {
  margin: 0;
  padding: 0;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  position: relative;
}

#html-container {
  min-height: 100%;
}

#main {
  overflow: scroll;
  padding-bottom: 81px;
}

/*RESET CSS END*/

.showcase {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
    ),
    url(/static/img/vg_home.jpeg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.showcase-content-top {
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.showcase-content-top h1 {
  margin-bottom: 20px;
  font-size: 50px;
  font-weight: 900;
  text-transform: uppercase;
}

.text-color {
  color: rgb(151, 193, 92);
}

#wave {
  height: 100px;
  width: 100px;
  border: 10px solid silver;
  position: absolute;
  top: 25.6%;
  left: 39.8%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-animation: pulseEffect 4s infinite linear;
  animation: pulseEffect 4s infinite linear;
}

@-webkit-keyframes pulseEffect {
  from {
    transform: translate(-50%, -50%) scale(0.5);
    border: 0px solid silver;
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    border: 10px solid rgb(151, 193, 92);
    opacity: 1;
  }
}

@keyframes pulseEffect {
  from {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.4;
  }
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.showcase-content-buttons > ul {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  padding: 0;
}

.showcase-content-buttons > li {
  width: 120px;
  display: inline-block;
}

.showcase-content-buttons a {
  display: inline;
  color: #fff;
}

.separator {
  color: rgb(151, 193, 92);
}

/* ===========================================
      NAV BAR STYLING  //  START
     =========================================== */
header {
  background: rgba(0, 0, 0, 0.9);
  width: 100%;
  position: relative;
  height: 75px;
}
header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-200%);
  transition: 0.2s;
  z-index: 5;
}
body.scroll header.sticky {
  transform: translateY(0);
}
.nav-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  height: 75px;
  padding: 1px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul li {
  display: inline-block;
  padding: 0 10px;
  margin-bottom: 0;
  vertical-align: middle;
}

.menu {
  margin-bottom: 0;
}

nav.nav-wrapper ul li a {
  font-size: 20px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: 0.3s;
}
nav.nav-wrapper ul li a:hover {
  border-bottom: 1px solid rgb(151, 193, 92);
}

.logo {
  vertical-align: middle;
}

header .logo img {
  max-width: 50px;
  transition: 0.8s;
}

header .logo img:hover {
  transition: 0.8s;
  transform: scale(1.3);
}
/*Navigation Bar styling  //  END*/

/* ===========================================
       FOOTER STYLES //  START
  =============================================*/
#footer {
  position: relative;
  height: 81px;
  margin-top: -81px;
  background: rgb(25, 25, 25);
  color: white;
  text-align: center;
  clear: both;
}

.footer-content {
  margin: auto;
  width: 100%;
  padding: 5px 0;
}

p.logos {
  margin-bottom: 0;
}

footer h1 {
  font-size: 20px;
  color: white;
  font-weight: bold;
}

footer a {
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}

footer a:hover {
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgb(151, 193, 92);
}
/*FOOTER STYLES END*/

/* ============= RESPONSIVE max-width: 991p =========== */
@media (max-width: 991px) {
}
/* ============= RESPONSIVE max-width: 768px =========== */
@media (max-width: 768px) {
}
/* ============= RESPONSIVE max-width: 385px=========== */
@media (max-width: 385px) {
}

【问题讨论】：

这将有助于查看更多您的样式代码，您的背景图像代码似乎是有效的。
@justinw CSS 添加。谢谢！
如果没有看到现场示例就很难调试，但看起来您的页脚位于 main 和 html-container 元素之外 - 这是有目的的吗？另外，如果您将.showcase 的height 设置为100vh，有什么变化吗？
@justinw 您可以重新提交您的上一条评论作为问题吗？因为它起作用了！我想将其标记为正确。是的，100% 需要是 vh。是的，页脚应该在容器之外，因此随着容器变长它会被向下推。谢谢！
作为答案提交，我很高兴它对你有用！

标签： css django django-templates

【解决方案1】：

查看标记我可以看到一些问题，但是如果不实时查看布局，则很难进行调试。

1 - 我注意到 footer 元素位于您的主容器之外 - main 和 html-container。

2 - 您可能想在.showcase 元素上尝试100vh，而不是100%。原因是100vh 将占据可见视口的 100%，而不管父容器上设置的 height 值如何。

更改为100vh 可能会提供快速修复，但我建议查看标记并确保父元素的高度设置正确。 height: 100% 表示一个元素将占据 100% 的可用高度，但如果父元素不设置了 height，则 100% 不会做任何事情。

【讨论】：

这更有意义。发生的事情是我的页脚从页面底部升起，即使页面内容比视口长。所以我创建了一个 div 容器，每当 div 中的东西 main 增长时，它就会增长。随着这两个增长，页脚将被向下推。所以我给页脚一个负边距，与我希望它的高度相匹配，这会将它拉回到视野中。我为容器元素设置了一个等于该负边距的底部填充，因此当内容重新出现时，它不会位于页脚下方。谢谢！