gpt4 book ai didi

html - 全屏图片只占前1/3

转载 作者:太空宇宙 更新时间:2023-11-03 19:36:12 25 4
gpt4 key购买 nike

@import url('https://fonts.googleapis.com/css?family=Raleway')
@import url('https://fonts.googleapis.com/css?family=Oswald')
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width:100%;
margin: auto;
background: url(https://static.pexels.com/photos/26206/pexels-photo.jpg) no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
<!Doctype html>
<html>
<head>
<title>Full Screen Landing Page
</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Breathe Easy
</h1>
<a href="#" class="btn">Get Started
</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, alique
</p>
</div>
</div>
</section>
</body>
</html>

When I open index.html in chrome the body only occupies the top 1/3 of the screen. It appears to run fine on stackoverflow, however. Why is this happening? My intention is to make a responsive full screen landing page. Thanks.

最佳答案

如果您希望背景占据 100% 的空间,请将背景图像应用于 body 元素,而不是 #intro#intro 仅与您的内容一样高,因此背景仅覆盖该高度。

关于html - 全屏图片只占前1/3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43264973/

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