Question

所以我正在开发我的第一个网站，我正在尝试使用大图像作为主屏幕的前端。在实现jumbotron时，它会在图像周围创建一个白色边框，即使我一直将背景颜色设置为黑色。我的页脚也是一样，当我添加背景颜色时，它只将颜色设置为页脚的区域区域而不是整个屏幕底部。我怎么能解决这个问题，因为我试图让屏幕的底部变黑，而且我想让图片边框呈蓝色。下面是主屏幕外观的两张照片，以便您可以看到白色边框的位置。谢谢你的帮助。

This is the footer of my website. I don't understand why only a small portion of the footer is black and not the whole bottom.

This is the large image that I have put on my screen. In my css I have used it as a background image. Every time I change the background color to black the border around the image stays as white.

容器上面的第一个标签是“div class =”jumbotron“。代码片段不允许我出于某种原因把它放进去。

  <div class="container">`
    <div class="row text-center">`
      <a class="btn btn-primary" href="#"role="button">Hello</a>`
   `</div>`
  </div>`
</div>`

<!-- Write your comments here -->

<footer class="container">
    <div class="row">
    <p class="col-sm-4">
      &copy; Stock
    </p>
    <ul class="col-sm-8">
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg"></li>
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg"></li>
        <li class="col-sm-1"> <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg"></li>
        <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg"></li>
    </ul>
    <p class="col-sm-3">About Us</p>
  </div>
</footer>

CSS

.jumbotron {
  display: flex;
  align-items: center;
  background-image:url('https://inst.eecs.berkeley.edu/~cs194-26/fa14/upload/files/proj3/cs194-di/proj3_sutardja_anthony/imgs/earth_road_joined/road.png');
  background-size: cover;
  height: 700px;
  margin:75px;
  background-attachment:fixed;
  border-style:solid;
  background-color:black;

}

footer {
  font-size: 15px;
  padding: 20px 0;
  color:red;
  font-family: 'Ubuntu', sans-serif;
  margin:10;
  background-color:black;
}

footer .col-sm-8 {
   display: flex;
   justify-content: flex-end;
}

footer ul {
  list-style: none;
}

footer li img {
  width: 32px;
  height: 32px;
}

Answer 1

我的猜测是白色来自页面背景，因为您使用的边距不会扩展元素的背景。

尝试将body { background-color: black}添加到您的css

Answer 2

以下是适合您的 plunker ：

https://plnkr.co/edit/h5X9Q1rIwFuMsY3N1YGD?p=preview

已添加

body{
  background-color:black;
}

现在我希望它是你想要的。玩得开心，开发您的第一个网站。祝你好运。

Answer 3

您将黑色背景应用于容器。在这种情况下的经验法则是使用另一个div来包装容器。

您可能想要做这样的事情

<footer>
  <div class="container">
    <div class="row">
    <p class="col-sm-4">
      &copy; Stock
    </p>
    <ul class="col-sm-8">
      ...
    </ul>
    <p class="col-sm-3">About Us</p>
  </div>
</footer>

另外，我建议您对内联元素执行相同操作，以便更好地阅读代码。

考虑改变

    <p class="col-sm-4">
      &copy; Stock
    </p>

到

    <div class="col-sm-4">
      <p>&copy; Stock</p>
    </div>

对于图像问题，请显示代码。好像你需要重置边距和填充

*{
margin: 0;
padding: 0;
}

Jumbotron和Footer创建白色边框尽管我已经把黑色的背景颜色

3 个答案: