几周前我发布了一个类似的问题，我已经准备好了。但内容和页脚 DIVS 的位置非常错误。我希望他们在每页的图像下方打印，因此当页面打开时，我选择的图像会占据整个屏幕，但您可以向下滚动以查看更多内容。现在它仍然只是显示图像的顶部。我将在下面为我的主页和样式表提供代码片段（是的，它用于学校项目，所以它是随机的东西）
body,
html {
height: 100%;
width: 100%;
font-size: 100%;
background-color: #333;
}
h1 {
font-size: 5em;
}
h2 {
font-size: 2.5em;
}
.content {
font-family: sans-serif;
margin: 10%;
font-size: 170%;
border: 10px outset orange;
color: white;
text-align: bottom;
padding: 1.5%;
line-height: 100%;
position: static;
border-style: solid;
border: 2px;
border-color: white;
background-color: pink;
}
.footer {
font-family: sans-serif;
margin: 10%;
font-size: 170%;
border: 10px outset orange;
color: white;
text-align: bottom;
padding: 1.5%;
line-height: 100%;
position: static;
border-style: solid;
border: 2px;
border-color: white;
background-color: purple
}
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blackred.webp");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-repeat: no-repeat;
background-size: cover;
margin-top: 0%;
margin-bottom: 0%;
margin-right: 0%;
margin-left: 0%;
position: absolute;
}
/* Place text in the middle of the image */
.hero-text {
font-family: 'Arial';
position: center;
margin-top: 10%;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
color: white;
text-align: center;
font-size: 150%;
}
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: white;
color: black;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.button {
background-color: black;
border: 2px solid white;
border-color: #FFFFF;
color: white;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: white;
color: black;
}
.hero-image-valorant {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("valorant3.jpg");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
.hero-image-LOL {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("LOL1.jfif");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
.hero-image-RL {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("RL1.webp");
/* Set a specific height */
height: 100%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: absolute;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}<div class="navbar">
<a href="index.htm">Home</a>
<a href="signup.htm">Sign up</a>
<a href="about.htm">About us!</a>
<div class="dropdown">
<button class="dropbtn">Our teams ▼
</button>
<div class="dropdown-content">
<a href="LOL.htm">League of legends</a>
<a href="valorant.htm">Valorant</a>
<a href="RL.htm">Rocket league</a>
</div>
</div>
</div>
<div class="hero-image">
<div class="hero-text">
<img src="RCLOGO.png" alt="RCLOGO">
<h2>E sports team</h2>
<p>check out the navigation links above to learn about us!</p>
<p>OR:</p>
<a class="button" href="signup.htm">Join now</a>
</div>
<div class="content">
<p>CONTENT</p>
</div>
<div class="footer">
<p>FOOTER</p>
</div>
</div>我试图将绝对定位更改为使用百分比和边距，但这没有用，背景图像是唯一没有它似乎可以工作的东西。我正在考虑选择用标题文本居中填充屏幕的图像（这是有效的），然后向下滚动到内容段落（这是无效的）
您的内容位于图像之上，因为您的内容和页脚嵌套在您的主图像 div 中。将关闭的 div 标签移到内容 div 之前，这不会发生：
<div class="hero-image">
<div class="hero-text">
<img src="RCLOGO.png" alt="RCLOGO">
<h2>E sports team</h2>
<p>check out the navigation links above to learn about us!</p>
<p>OR:</p>
<a class = "button" href = "signup.htm">Join now</a>
</div>
</div>
<div class ="content">
<p>CONTENT</p>
</div>
<div class ="footer">
<p>FOOTER</p>
</div>
至于英雄图，如果你想让实际图像占据整个视口的空间，你可能会遇到图像拉伸或收缩以将其塑造成布局的问题，但我不能说当然，因为我没有看到图像。 每当我想要一个英雄形象时，我都会使用 flexbox，但同样，我使用它的方式取决于我要进行的设计。您还可以将最小高度设置为特定数量的像素，但这不是响应式网站的好解决方案。 希望有所帮助！