css - 无法让背景图像覆盖整个屏幕宽度

Question

我想要一个背景图像来填充整个屏幕宽度(虽然不是高度)，就像这些网站上的那样:http://www.rokivo.com/和 https://teemo.gg/

我目前的结构是这样的:

<header class="navbar navbar-default" role="navigation">

  <div class="container">
    Code for header
  </div>

</header>

<div class="container">
  Rest of page contents here
</div>

我是否必须将所有其他内容包装在带有类容器的 div 中并使用它来指定背景图像？还是有其他方法可以做到这一点？

Answer 1

您可以执行以下操作:

HTML:

<header class="navbar navbar-default" role="navigation">

  <div class="header-content">
    Code for header
  </div>

</header>

<div class="container">
  Rest of page contents here
</div>

CSS:

header {
  width: 100%;
  background: url(https://unsplash.it/2000/1000/?blur) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.header-content {
  padding: 5em 0;
  font-size: 2em;
  text-align: center;
}

那么这里发生了什么？包装标题的宽度为 100%，以覆盖整个屏幕宽度，并且还具有背景图像。此外，它被设置为不重复和垂直/水平居中，以及背景大小设置为覆盖以允许尽可能多的图像显示。

在 .header-content 上，向 div 添加了填充，使其垂直居中。

可以调整填充、文本大小等，但这应该让您大致了解这种效果是如何实现的。

要查看实际效果，请参阅 codepen .