html - 在元素的一半设置背景

Question

我有一个背景问题，我不知道如何解决。

我希望我的背景只从画面的中间开始。

下面是我设置背景的代码:

#video_player {
    background-image: url("http://94.23.46.98/img/bg-f.jpeg");
    background-size: 100% auto;
}

以及页面的完整代码:http://jsfiddle.net/u4hpezon/

Answer 1

因此，您要实现的目标需要更多 div。下面是一个工作示例。

最喜欢的部分

1. 创建容器并设置样式。

   我们使用 div 创建一个 container。容器必须适合整个页面，所以让我们这样做:

   min-height: 100vh;
   min-width: 100vw;
   

   使其适合页面。然后，我们要定位容器，因为稍后我们将使用绝对定位。

2. 创建一个 div 来保存您的内容(文本、图像等...)

   这是我们的 .text-container div。此 div 将作为您的内容的容器。然后，让这个 div 填充整个页面:

   width: 100vw;
   height: 100vh;
   

   然后，让我们定位里面的 div、img、whatever:

   display: flex;
   justify-content: center;
   align-items: center;
   

   See A complete guide to flexbox

3. 创建一个div来放置背景

   这是我们的.background div。我们希望这个 div 只适合父级高度的一半。这就是height: 50vh;的工作，在此之后，这个div需要定位。

   那么让我们开始吧:

   position: absolute;
   bottom: 0;
   

4. 对图层进行排序

   您可能会遇到元素顺序问题。让我们预先解决这个问题，以防万一，使用一些 z-index: -1; 来确保背景保持在背景中。

body,
div {
  margin: 0;
  box-sizing: border-box
}

.container {
  position: relative;
  min-height: 100vh;
  min-width: 100vw;
  text-align: center;
}

.background {
  background: teal;
  height: 50vh;
  min-width: 100vw;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.text-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  background: orange;
  padding: 0 15px;
}

<div class="container">
  <div class="text-container">
    <div class="text">
      <h1>Text!</h1>
    </div>
  </div>
  <div class="background">

  </div>
</div>

希望对您有所帮助!