Question

尝试消除页面顶部和背景图片之间的间隙。尝试在CSS文件中使用边距进行调整，但是没有任何效果。

非常感谢您的协助。谢谢！

body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

#header {
-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background: #2e3842;
height: 3em;
left: 0;
line-height: 3em;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

HTML：

<body class="landing">
<div id="page-wrapper">
<header id="header" class="alt">
<h1><a href="index.html">DFKDJDFD</a></h1>
<nav id="nav">
    <ul>
    <li class="special">
    <a href="#menu" class="menuToggle"><span>Menu</span></a>
    <div id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#three">About Us</a></li>
            <li><a href="#cta">Contact</a></li>
            <!-- <li><a href="#">Sign Up</a></li>
            <li><a href="#">Log In</a></li> -->
            </ul>
    </div>
    </li>
    </ul>
</nav>
</header>

将我的背景图像添加到CSS的位置：

   body.landing #page-wrapper {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), 
    rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), 
    rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), 
    rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-image: linear-gradient(top, rgba(0,0,0,0.5), 
    rgba(0,0,0,0.5)), url("../../images/banner.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
    }

Answer 1

在背景图片上尝试一下：

 position: absolute; top:0;

，让我知道它是否有效。

Answer 2

在图片上尝试使用此CSS

img {
position: absolute;
margin: 0px;
padding: 0px;

}

Answer 3

此CSS将删除浏览器的默认填充和边距。

 body{
 padding:0px;
 margin:0px;
 box-sizing:border-box;
 }

无法消除背景图片和标题之间的差距

3 个答案: