html - 使用视差滚动时如何消除标题和背景图像之间的空白？

问题描述

这是我的网站关于度假胜地（纽约）的 HTML 代码。到目前为止，我已经制作了一个导航栏并使用两个背景图像实现了视差滚动。然后我在运行代码时看到导航栏和第一个背景图像之后有一个空白，我不知道如何解决这个问题。我试过改变填充和边距，但这不起作用:(非常感谢一些帮助！

 body, html{
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
 }

 .container {
     width: 80%;
     margin: 0 50px;
 }

 header{
     background:plum;
     position: relative;
 }

 header::after{
     content: "";
     display: table;
     clear:both;
 }

 .logo{
     width: 100px;;
     height: 60px;
     float: left;
     padding: 0px;
 }

 nav{
     float: inline-end;
     overflow: auto;
 }

 nav ul{
     margin: 0;
     padding: 0;
     list-style: none;
 }

 nav li{
     display: inline-block;
     margin-left: 70px;
     padding-top: 20px;
     font-size: 18px;
     position: relative;
 }

 nav a{
     color: black;
     text-decoration: none;
     text-transform: uppercase;

 }

 nav a:hover{
     color: rgb(0, 0, 0);
 }

 nav a::before{
     content: "";
     display: block;
     height: 3px;
     background-color: rgb(0, 0, 0);

     position: absolute;
     top: 0;
     width: 0%;
     transition: all ease-in-out 250ms;
 }

 nav a:hover::before{
     width: 100%;
 }

 .bg-one{
     background-image: url("bg-one.jpg");
     height: 100%;
     padding-top: 0;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
     position:relative;     
 }


 .transbox{
     padding: 10px;
     width: 30%;
     background-color: white;
     border: 10px double black;
     opacity: 0.6;
     margin-left: 50px;
     margin-right: auto;
     margin-top: 4%;
     margin-bottom: auto;
     display: block;
 }

 .transbox p{
     margin: 5%;
     font-weight: bold;
     color: black;
 }

 h1{
     text-align: center;
     font-size: 65px;
 }

 .first-block{
     height: 100px;
     background-color:rgb(109, 176, 243);
     text-align: center;
     border: 10px double white;
     padding-bottom: 60px;
     vertical-align: auto;
 }

 h3{
     text-transform: uppercase;
     font-size: 50px;
     text-align: center;
     color: rgb(13, 97, 170);
 } 


 .bg-two{
     background-image: url("bg-two.jpg");    
     height: 100%;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
     position: relative;
 }

<!DOCTYPE html>
  <html lang="en">
     <head>
         <meta charset="utf-8">
         <title>New York</title>
         <link rel="stylesheet" href="main.css">
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap" 
 rel="stylesheet">
     </head>
     <body>
         <header>
             <div class="container">
             <img src="nyc-logo.png" alt="logo" class="logo">

             <nav>
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">About</a></li>
                     <li><a href="#">Gallery</a></li>
                     <li><a href="#">Contacts</a></li>

                 </ul>
             </nav>
             </div>
         </header>
         <div class="bg-one">
             <div class="transbox">
                 <h1>NEW YORK</h1>
             </div>
         </div>
         <div class="first-block">
             <h3>Welcome to the city that never sleeps...</h3>
         </div>
         <div class="bg-two"></div>
     </body>
 </html>

标签： htmlcss

.transbox{ padding: 10px; width: 30%; background-color: white; border: 10px double black; opacity: 0.6; margin-left: 50px; margin-right: auto; margin-bottom: auto; display: block; }

html - 使用视差滚动时如何消除标题和背景图像之间的空白？

问题描述

解决方案

推荐阅读