如何去掉页面顶部的白色条?

如何将导航条和徽标移动到背景图像中而不让这个白条出现在顶部?我是新的html和css，但有一些基本的知识。我查了其他类似的问题，但也帮不了我。我想保留视差效果，同时在顶部有一个导航栏。这可能就是为什么其他问题不能帮助我的原因，所以我在这里问一个新问题。提前谢谢。

html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
}
body {
color: white;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 100vh;
position: relative;
transform-style: inherit;
width: 100vw;
text-align: center;
text-transform: uppercase;
}
header h1 {
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
}
header h2 {
margin: 0;
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
font-size:20px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: url(IMG_3497.JPG);
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
.container {
z-index: 2;
position: absolute;
top: 100vh;
background: black;
line-height: 30px;
font-weight: lighter;
padding: 40px;
color: grey;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 120px;
cursor: pointer;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Think Tank</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="navbar">
<img src="officialipng.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ratgeber</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
</div>
<header>
<h1>Think Tank</h1>
<h2>Finanzen • Business • Mindset</h2>
</header>
</body>
</html>

输入图片描述

你需要为CSS中的NavBar类设置padding为0。它将移除顶部的空白。为了更好地理解，我建议您检查一下浏览器，检查一下组件的布局。

你的html和css中有很多内容，所以我写了一些东西来帮助你开始。它使用了很好的弹性来移动所有的东西，但我认为你应该可以从这里编辑它。

html {
margin: 0;
padding: 0;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
}
body {
color: white;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
}
h1, h2 {
text-align: center;
}
header {
background: url(https://via.placeholder.com/1200) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
}
header div {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
nav ul {
display: flex;
align-items: center;
justify-content: space-around;
margin: 0;
padding: 0;
list-style: none;
}
nav a {
display: block;
padding: 1rem;
}
.container {
background: black;
line-height: 30px;
font-weight: lighter;
padding: 40px;
color: grey;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Think Tank</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav>
<img src="https://via.placeholder.com/120" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ratgeber</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<div>
<h1>Think Tank</h1>
<h2>Finanzen • Business • Mindset</h2>
</div>

</header>
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis
nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis.
Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores
vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio
voluptatibus ab laboriosam, quia consectetur atque minus? Adipisci amet aut sint
voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo
perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem
aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae
nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum perferendis error
debitis deleniti obcaecati nisi dignissimos doloribus omnis incidunt neque.
Aspernatur, odit. Natus, porro adipisci corporis perspiciatis aspernatur illum
repellendus vitae explicabo, ex reiciendis molestiae id dicta quos repudiandae at.
</p>
</div>

</body>
</html>
Expand snippet

相关内容

最新更新

热门标签：