所以我想要一个覆盖整个屏幕的图像，直到您开始向下滚动。 (此图像也是带有淡入淡出动画的幻灯片)该图像的中心应该是文本。页眉应与图像重叠，页脚应位于其下方。 (稍后我会在页脚和图片之间添加更多内容)
但是，目前它没有按预期工作。页眉和页脚都与背景图像重叠。文本在页眉和页脚对齐的位置居中，而不是在背景图像的中间。我需要一些帮助。请引用下面的图像和代码。您也可以在 https://www.mh-rp.com 查看页面.
image with notes and clarification
<body style="background-color:#111111">
<header>
<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src="/images/weblogo.png" alt="MHRP">
</div>
<ul class="navigation">
<a href="https://www.mh-rp.com/"><li><i class="fa fa-home"></i> Home</li></a>
<a href="https://www.forum.mh-rp.com/pages/About_Us/"><li><i class="fa fa-address-card"></i> About</li></a>
<a href="https://www.forum.mh-rp.com/"><li><i class="fa fa-comments"></i> Forum</li></a>
<a href="https://www.ucp.mh-rp.com/"><li><i class="fa fa-sign-in"></i> UCP</li></a>
<a href="https://www.mh-rp.com/discord"><li><i class="fab fa-discord"></i> Discord</li></a>
</ul>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.navigation').toggleClass('active')
})
})
</script>
<main>
<div class="image_container">
<div id="background-preload" class="background-start"></div>
<script>$('#background-preload').delay(5000).fadeOut('slow');</script>
<ul class="cb-slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<div class="maintext">Mulholland Roleplay
<div><img class="ipimage" src="/images/sa-mp.png"></div>
<div><span class="mainip">57.80.79.165:1050</span></div>
<div><a class="mainbutton" href="https://www.forum.mh-rp.com/wiki/game-server/">Play Now</a></div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="inner_footer">
<div class="logo_container2">
<img src="/images/logo.png" alt="MHRP">
<div>
<a href="//www.dmca.com/Protection/Status.aspx?ID=6c4220d8-268c-4e0c-897f-3ba9a38e002d" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=6c4220d8-268c-4e0c-897f-3ba9a38e002d" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>
</div>
</div>
<div class="footer_third">
<h1>Need Help?</h1>
<a href="https://www.forum.mh-rp.com/misc/contact/">Contact Us</a>
<a href="https://www.forum.mh-rp.com/help/cookies/">Cookie Usage</a>
<a href="https://www.forum.mh-rp.com/help/terms/">Terms & Conditions</a>
<a href="https://www.forum.mh-rp.com/help/privacy-policy/">Privacy Policy</a>
</div>
<div class="footer_third">
<h1>More</h1>
<a href="https://www.forum.mh-rp.com/wiki">Encyclopedia</a>
<a href="https://www.forum.mh-rp.com/shop/">Credit Store</a>
<a href="https://www.rockstargames.com/">Rockstar Games</a>
<a href="https://www.sa-mp.com/">San Andreas Multiplayer</a>
</div>
<div class="footer_third">
<h1>Follow Us</h1>
<li><a href="https://www.instagram.com/mulhollandroleplay/"><i class="fa fa-instagram"></i> Instagram</a></li>
<li><a href="https://twitter.com/mulholland_rp"><i class="fa fa-twitter"></i> Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UCZ1RdxUtDJubpWc6y4GOdZg?view_as=subscriber"><i class="fa fa-youtube"></i> YouTube</a></li>
</div>
<br/>
<div class="footer_third">
<p style="color:white; text-align:center; font-size:16px;"><br/><br/>Copyright © 2019 mh-rp.com
<br/>
The mh-rp game server is powered by sa-mp.com. sa-mp.com is powered by Grand Theft Auto: San Andreas.
<br/>
mh-rp.com and the contents herein, are not affiliated with Rockstar Games, Rockstar North, Take-Two Interactive Software Inc or sa-mp.com.
<br/>
Grand Theft Auto and Grand Theft Auto: San Andreas are registered trademarks of Take-Two Interactive Software Inc.</p>
</div>
</div>
</footer>
<script src="/js/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#3a3a3a",
"text": "#a0a09e"
},
"button": {
"background": "#185886"
}
},
"content": {
"message": "This site uses cookies to help personalise content, tailor your experience, advertise and to keep you logged in if you register.\nBy continuing to use this site, you are consenting to our use of cookies.",
"dismiss": "Accept",
"link": "Learn more..."
},
"position": "bottom-left"
});
</script>
</body>
@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
*
{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* start of not found */
.logo_container3
{
text-align: center;
}
.headertext
{
color: white;
display: block;
text-align: center;
width: 100%;
padding-top: 20px;
}
.buttontext
{
color: white;
font-family: "Verdana";
padding: 0px 20px;
}
.buttontext:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* end of not found */
/* start of header */
.header
{
width: 100%;
height: 80px;
display: block;
background-color: #292929;
}
.inner_header
{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #292929;
}
.logo_container
{
height: 100%;
display: table;
float: left;
}
.logo_container img
{
display: table-cell;
vertical-align: middle;
padding-top: 5%;
height:60px
}
.navigation
{
float: right;
height: 100%;
}
.navigation a
{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li
{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Verdana";
font-size: 16px;
}
.navigation a:first-child
{
background-color: #185886;
}
.navigation a:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* mobile */
.menu-toggle
{
color: white;
float:right;
line-height: 77px;
font-size: 48px;
cursor: pointer;
display: none;
}
@media (max-width: 1000px)
{
.menu-toggle
{
display: block;
}
.navigation
{
position: absolute;
width: 100%;
height: calc(100vh -50px);
background: #333;
top: 80px;
left: -100%;
transition: 0.5s;
display: grid;
}
.navigation.active
{
left: 0;
}
.navigation ul
{
display: block;
text-align: center;
}
.navigation ul li a
{
border-bottom: 1px solid rgba(0,0,0,.2);
}
.inner_header
{
width: 90%;
}
}
/* end of header */
/* start of footer */
.footer
{
width: 100vw;
display: block;
overflow: hidden;
padding: 70px 0;
box-sizing: border-box;
background-color: #18181a;
}
.inner_footer
{
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.inner_footer .logo_container2
{
width:35%;
float: left;
height: 100%;
display: block;
}
.inner_footer .logo_container2 img
{
width: 100px;
height: auto;
}
.inner_footer .footer_third
{
width: calc(21.6666666667% -20px);
margin-right: 10px;
float: left;
height: 100%;
}
.inner_footer .footer_third:last-child
{
margin-right: 0;
}
.inner_footer .footer_third h1
{
font-family: 'arial';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.inner_footer .footer_third a
{
font-family: "Arial";
font-size: 18px;
color: white;
display: block;
font-weight: 200;
width: 100%;
}
.inner_footer .footer_third a:hover
{
color:white; background:#292929;
-o-transition:color .2s ease-out, background 0.5s ease-in;
-ms-transition:color .2s ease-out, background 0.5s ease-in;
-moz-transition:color .2s ease-out, background 0.5s ease-in;
-webkit-transition:color .2s ease-out, background 0.5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 0.5s ease-in;
background-color: #185886;
}
/* mobile */
@media(max-width: 1000px)
{
.footer .inner_footer
{
width: 90%;
}
.inner_footer .logo_Container2,
.inner_footer .footer_third
{
width: 100%;
margin-bottom: 30px;
}
}
/* end of footer */
/* start of main */
body
{
overflow-x: hidden;
}
/* this is there to show no fading animation when you load the page for the first time */
.background-start
{
background-image: url(../images/1.png);
position: fixed;
background-attachment: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.png);
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.png);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.png);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.png);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.png);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.png);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
.image_container
{
position:relative;
}
.maintext
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 72px;
}
.mainbutton
{
position: absolute;
top: 150%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
border-style: solid;
border-width: 1px;
border-color: white;
transition: border-width 0.3s;
padding: 5px 5px 5px 5px;
}
.mainip
{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Staatliches", "Arial", sans-serif;
font-weight:normal;
font-style:normal;
font-size: 32px;
}
.ipimage
{
position: absolute;
top: 80%;
left: 27.5%;
width: 32px;
}
.mainbutton:hover
{
border-width: 3px;
}
/* end of main */
最佳答案
添加这两个选择器。
.image-container { height: 100vh }
header, footer { position: relative; z-index: 1 }
关于html - 背景图片与页眉和页脚重叠，文本不会居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58613558/