时间戳

首页 > 解决方案 > 在我添加文本时背景图像与导航栏的距离，我该怎么做？

html - 在我添加文本时背景图像与导航栏的距离，我该怎么做？

问题描述

我试图在我的背景图像上添加文本，但它导致背景图像与导航栏的距离是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
    <header>     
        <div class="container">
                <nav>
                    <div class="logo"><img src="/img/logo.png"></div>
                    <div class="nav-list">
                        <ul class="nav-item"><li><a href="#">Home</a></li></ul>
                        <ul class="nav-item"><li><a href="#">Products</a></li></ul>
                        <ul class="nav-item"><li><a href="#">About</a></li></ul>
                        <div class="hamburger" onclick="clk()" id="burger">
                            <div id="line1"></div>
                            <div id="line2"></div>
                            <div id="line3"></div>
                        </div>
                    </div>
                </nav>
           </div>
           <div class="sidemenu" id="sdmenu">
            <div class="side-items">
                <ul class="side-item"><li><a href="#">Home</a></li></ul>
                <ul class="side-item"><li><a href="#">Products</a></li></ul>
                <ul class="side-item"><li><a href="#">About</a></li></ul>
            </div>
        </div>
    </header>
    <script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
    <h1>Welcome to the Land of Electronics</h1>
</div>
</body>
</html>

这是CSS：

/* Navbar starts ===============================================================================*/
body{
    padding:0px;
    margin:0px;
    overflow-x: hidden;
}

.container{
    width: 100%;
    height:78px;
    position: relative;
    background-color: rgb(39, 44, 52);
    z-index: 1;
}
.logo{
    position: absolute;
    padding:0.6%;
    padding-top: 0.2%;
    
}
.nav-list{  
    font-family: 'Noto Serif', serif;
    position: absolute;
    right: 0px;
    top: 1%;
    display: flex;
    padding:1.0%;
    z-index: 1;
}
.nav-list a{
    margin: 15px;
    text-decoration: none;
    color: #80e560;
    transition: color 400ms ease-in-out;
}
.nav-list a:hover{
    color: #a8fbfc;
}
.nav-list ul{
    list-style-type: none;
}
.hamburger{
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;

}
.hamburger div{
    width: 20px;
    height: 2px;
    background-color: #80e560;
    margin: 3px;
    margin-left: 50%;
    transition: transform 210ms ease-in-out;
}
.sidemenu{
   position: absolute;
   right: 0px;
   width: 40%;
   height: 100%;
   width: 20%;
   background-color: rgb(39, 44, 52);
   transform:translateX(100%);
   transition:transform 500ms;
   z-index: 1;
   
}
.side-items{
    height:80%;
    justify-content:space-between;
    position: absolute;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Serif', serif;
    align-items : space-between;
}
.side-item{
    list-style-type: none;
}
.side-item a{
    color: white;
    text-decoration: none;
    transition: color 500ms ease-in-out;
}
.side-item a:hover{color:#80e560;}
@media screen and (max-width:1500px){
    .logo{padding-top: 0.3%;}
}
@media screen and (max-width:768px){
    .nav-item{
        display: none;
    }
    .hamburger{
        display:inline;
        bottom: 12px;
        right: 35px;
    }
    .side-items{
        right: 20%;
    }
    .nav-list{
        padding: 40px;
    }
    .container{
        height: 89px;
    }
    .logo{padding-top: 2%;}

}
@media screen and (max-width:568px){
    .hamburger{
        right: 50%;
    }
    .side-items{
        right: 20%;
        font-size: 12px;
    }
    .container{
        height: 89px;
    }
}
@media screen and (max-width:280px)
{     
     .side-items{
         right: 9%;
     }
     .hamburger{
         right: 6%;
     }
}

/* Navbar Ends ========================================================================*/
.mid-section{
background-image: url(/img/background.jpg);
background-position:center; 
background-size:cover;
width: 100vw; 
height: 100vh;
}
h1{text-align: center;}

我正在研究这些代码。我在调整大小和背景图像方面遇到了很多问题，但我可以解决它们（非常感谢）。但那是新的。我该怎么办 ？这是我正在谈论的丑陋结果：

在此处输入图像描述

标签： htmlcss

解决方案

在您的情况下，最好的选择是重置浏览器默认应用到元素的边距和填充。这是重置所有内容的好方法。请注意，如果您使用此选项，则必须添加自定义填充和边距。（基本上，它选择所有元素并为它们提供边距和填充 0 ）

这是最佳实践：

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

另一种选择是从h1

h1 {
margin: 0
}

这将在不破坏您的设计的情况下解决您的问题。虽然我更喜欢第一个选项，因为这是您每次添加新元素时都会遇到的常见问题。

推荐阅读