css - 背景图像在 Django 中无法正确呈现
问题描述
我正在使用 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 路径上,它也会显示一小段正确图像。但是,我的屏幕在图像应该出现的地方呈现白色。当我为我的页脚不停留在页面底部实施修复时,这种情况就开始发生了。
<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) {
}
解决方案
查看标记我可以看到几个问题,但是如果不实时查看布局就很难调试。
1 - 我注意到该footer
元素在您的主容器之外 -main
并且html-container
.
2 - 您可能想尝试元素100vh
,.showcase
而不是100%
. 这样做的原因是100vh
它将占用 100% 的可见视口,而不管height
在父容器上设置的值如何。
更改为100vh
可能会提供快速修复,但我建议查看标记并确保父元素的高度设置正确。height: 100%
表示一个元素将占据可用高度的 100%,但如果父级没有设置height
,则 100% 不会做任何事情。
推荐阅读
- c++ - 使用 Z 坐标的 OpenGL 2d 游戏渲染层
- php - 防止 fopen() 在文件开头添加空格
- python - 更改值为 1 的季度中每一行的 ID 值
- python - 更改外部包的记录器类
- javascript - ¿ 为什么我不能在这个查询处理程序中连接两个数组?
- react-router - React Router如何使用查询参数和多个查询参数将路径重定向到同一组件?
- java - @AutoConfigureTestDatabase com.ParallelUITesting.Autobot.Data.TradeJdbcDAO 中构造函数的参数 0 需要类型为 bean
- python - 如何在python字典列表中经常一起查找项目
- sql - 在 SQL Server 中将 SQL 查询从 Count(*) 更新为 EXISTS
- c# - Activity.Current 在带有 BlobTrigger 的 Azure 函数中为空