我网站的主页有 4 个部分。第一节heree只是带有一些文本的背景图像。但是，根据您的屏幕尺寸，该部分不会占据屏幕的 100%，因此底部有一些空白区域。是否可以让 .intro 部分在用户向下滚动之前占据 100% 的屏幕空间？
HTML
<div class="intro">
<div class="container">
<div class="content">
<h1>Myanmar's Leading Provider of Total HR Solutions</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit dignissimos blanditiis veritatis quidem voluptate minus laboriosam magnam tempora dolorem repellendus!</p>
<a href="search/search.php"><button class="button-1">Candidates</button></a>
<a href="contact/employer-contact.php"><button class="button-2">Employers</button></a>
</div>
</div>
</div>
CSS
.intro .container{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.55)),url(./images/home/myanmar.jpg)no-repeat center center/cover;
padding:1.4rem;
}
最佳答案
background-size 用于调整背景图像的大小。 <div>背景必须有一个高度才能看到背景图像。在背景上填充是不可能的，在类介绍上填充会影响类容器的大小
<body>
<div class="intro">
<div class="container">
<div class="content">
....
</div>
</div>
</div>
</body>
html, body {
height: 100%;
margin: 0;
}
body > .intro {
width: 100%;
min-height: 100%;
padding: 1.4rem;
background-image: url(./images/home/myanmar.jpg);
background-repeat: no-repeat;
background-size: ..... ;
}
背景大小
auto : background in original size (default)
cover : resize the background, edges stretch/cut a little bit
contain : resize the background and make it fully visible
100% : width 100%, height auto
100% 100% : width 100%, height 100%
关于html - 图像 100% 的屏幕(滚动前)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58158571/