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。下面是一个有效的示例。

参加派对

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

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

这是我们的.text-container部门。 div将作为您内容的容器。然后，使此div充满整个页面：
```
width: 100vw;
height: 100vh;
```
之后，让我们放置内部div，img，whatever：
```
display: flex;
justify-content: center;
align-items: center;
```
请参见A complete guide to flexbox
创建一个div来保留背景

这是我们的.background div。我们希望该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>

希望它有所帮助！

将背景设置在元素的一半上

1 个答案:

参加派对