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。

Answer 2

你可以做一些简单的事情：

s = "betty bought a bit of butter but the butter was bitter"
words = s.split()
l = []
k = []
unique_words = sorted(set(words))
for word in unique_words:
     k.append(word)
     l.append(words.count(word))

z = zip(k,l)
print z
z = sorted(z, key=lambda x: x[1] , reverse=True)
print z

这是对CSS-Tricks

的好读

无法获得背景图像以覆盖整个屏幕宽度

2 个答案: