时间戳

首页 > 解决方案 > 背景图像未从顶部 CSS 中出现

html - 背景图像未从顶部 CSS 中出现

问题描述

There is a gap above the top of the image. What is causing it? I want the image to appear from the very top of the page. The image covers takes up half the width of the webpage.

HTML（这里我添加了一个导航栏，并且有一个包含图像的 div 标签。）

<nav class="navbar">
    <ul>
        <li><a href ="#home"><div class ="line-effect">Home</div></a></li>
        <li><a href ="#about"><div class="line-effect">About</div></a></li>
        <li><a href ="#portfolio"><div class="line-effect">Portfolio</div></a></li>
    </ul>   
</nav>


<div class="bg-image">
    <img src="newvec.png"  height="800px" width="750px">
</div>

CSS（这是导航栏的样式。没有应用于图像的样式。“box:sizing:border-box”属性已应用于整个文档。）

   .navbar{
    padding:5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position:fixed;
    padding:50px 10px;
    width:100%;
    height:8vh;  
    }

  .navbar ul{
    display: flex;
    list-style: none;
    padding: 20px 40px; 
    }

   .navbar ul li a{
    font-family: Nunito;
    color:black;
    text-decoration: none;
    font-size: 20px;
    display: block;
    padding: 5px 25px;
    }

标签： htmlcssimagenavbar

解决方案

你检查过你的<body>标签吗？如果您没有使用标签 中reset.css的标准。 只是尝试添加margin<body>

body {
  margin : 0;
}

在你的 CSS 标签上。

推荐阅读