在元素的一半上设置背景答案

【问题标题】：set background on the half of an element在元素的一半上设置背景
【发布时间】：2018-10-16 08:34:26
【问题描述】：

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

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

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

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

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

【问题讨论】：

@Amessihel 是，但对于 jsfiddle 我需要放置完整路径
我已经尝试过了，但我认为我的代码有问题
您的小提琴似乎显示了关于结果的过于复杂的设计。虽然我可以设置一个简单的 fiddle 作为示例，但您可以开始重新思考您的 CSS 代码。避免翻译，例如 !important 标签，除非你不能这样做。您想将背景设置在视频的底部（左、中、中？）而不重复？
这里是我想要的结果94.23.46.98/img/result.png，因为你可以看到叶子从播放器的一半开始的背景
Half Background color for div的可能重复

标签： html css background

【解决方案1】：

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

C'est parti

创建容器并为其设置样式。

我们使用div 创建一个container。容器必须适合整个页面，所以让我们这样做：
```
min-height: 100vh;
min-width: 100vw;
```
使其适合页面。然后，我们要定位container，因为稍后我们将使用absolute 定位。
创建一个div 来保存您的内容（文本、图像等...）

这是我们的.text-container div。这个div 将作为您内容的容器。然后，让这个div 填满整个页面：
```
width: 100vw;
height: 100vh;
```
然后，让我们定位内部div、img、whatever：
```
display: flex;
justify-content: center;
align-items: center;
```
见A complete guide to flexbox
创建一个div 来保持背景

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

让我们开始吧：
```
position: absolute;
bottom: 0;
```
对图层进行排序

您可能会遇到元素顺序问题。让我们预先修复它，以防万一，使用一些 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>

希望对您有所帮助！

【讨论】：