如何摆脱div背景图像之间的身体背景颜色

时间：2016-11-22 19:06:24

标签： html css

div背景图像之间有白色条纹。

截屏：

enter image description here

代码：

＆＃13;
＆＃13; 
body {
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-align: center;
}
h1 {
  font-size: 100px;
  margin-left: auto;
  text-align: center;
}
.social-media img {
  height: 100px;
  width: 100px;
  border-radius: 40px;
}
#profile-pic {
  height: 250px;
  width: 250px;
  border-style: hidden;
  border-radius: 25px;
}
.albums img {
  height: 150px;
  width: 150px;
}
#intro {
  background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center-top;
  background-position-x: 50%;
  background-position-y: 0%;
}
#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center-top;
  background-position-x: 50%;
  background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}
.navbar .navbar-collapse {
  text-align: center;
}
hr {
  opacity: 0.5;
}
＆＃13; 
<div class="container-fluid">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#entertainement">Entertainement</a></li> 
      <li><a href="#contact">Contact Me</a></li> 
    </ul>
  </div>
</nav>
<div id="intro">
  <h1 class="text-center">My website</h1>
  <p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
  <img id="profile-pic" src="#" alt="profile pic">
  <p><br /><br />follow me on social media</p>
  <div class="social-media">
    <a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
    <a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
    <a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
    <a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
    <a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
  </div><br /> <hr />
</div>
<div id="portfolio">
  <h2>My portfolio of nothing:</h2>
  <div class="albums">
    <a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

从h2移除保证金并删除<hr>以删除空格

在你的css中添加h2 {margin : 0} 

body {
    color: white;
    font-family: monospace;
    font-size: 20px;
    text-align: center;
  }
  h1 {
    font-size: 100px;
    margin-left: auto;
    text-align: center;
  }
  .social-media img {
    height: 100px;
    width: 100px;
    border-radius: 40px;
  }
  #profile-pic {
    height: 250px;
    width: 250px;
    border-style: hidden;
    border-radius: 25px;
  }
  .albums img {
    height: 150px;
    width: 150px;
  }
#intro {
  background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
hr {
  opacity: 0.5;
}
h2 {
  margin: 0;
}
<div class="container-fluid">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#entertainement">Entertainement</a></li> 
      <li><a href="#contact">Contact Me</a></li> 
    </ul>
  </div>
</nav>
<div id="intro">
  <h1 class="text-center">My website</h1>
  <p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
  <img id="profile-pic" src="#" alt="profile pic">
  <p><br /><br />follow me on social media</p>
  <div class="social-media">
    <a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
    <a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
    <a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
    <a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
    <a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
  </div><br /> 
</div>
<div id="portfolio">
  <h2>My portfolio of nothing:</h2>
  <div class="albums">
    <a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>

答案 1 :(得分：1)

我猜测margin元素上有<h2>My portfolio of nothing:</h2>样式（可能是默认的浏览器样式），它正在推倒整个#portfolio容器。

尝试重置h2的边距并用填充方式将其按下：

h2 {
  margin: 0;
  padding: 20px 0;
}

答案 2 :(得分：1)

Web浏览器通常默认添加一些css。在您的代码中，带有id组合的div具有H2元素，其在顶部和底部具有10px的边距，由网络浏览器添加。只需添加以下css即可。

h2{
   margin-top:0px;
   padding-top:10px;
}

从带有id intro的div中删除<hr>标记。

答案 3 :(得分：0)

这里有一些自相矛盾的设置：

#portfolio {
   background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}

只需删除底部三个，使其成为

#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

cover足以填满DIV并与其下方的设置相矛盾。

他的方式与其他DIV相同。

相关问题
最新问题