gpt4 book ai didi

html - 图像 100% 的屏幕(滚动前)

转载 作者:行者123 更新时间:2023-11-27 23:18:12 25 4
gpt4 key购买 nike

我网站的主页有 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com