寻找一种方法来创建具有重叠文本的网页布局

Question

我正在尝试构建以下布局：

屏幕左半部分的背景颜色，屏幕右半部分的图像和重叠文本：

我正在使用基于 bootstrap 主题的 Drupal。

我尝试通过将图像设置为大小为 50% 100% 和 position:right 的背景图像来构建它，但这并不能保持图像比例。
我也试过将文本放在 col-6 中，将图像放在 col-6 中，这在我将 display:-moz-box, position:relative 和 z-index:999 应用于文本时有效，但是感觉很老套，我不知道这是否是正确的方法。

是否可以通过使用 bootstrap 嵌套来构建这样的布局，其中文本与背景颜色和背景图像重叠？

谢谢！

Answer 1

首先，您应该使用 bootstrap 网格将页面一分为二

<div class="header row">
  <div class="header__left col-sm-6">
    <h1>Shinny homepage</h1>
  </div>
  <div class="header__right col-sm-6"></div>
</div>

其次，您必须确保这两列保持相同的高度。例如，您添加一条规则，将页眉高度设置为屏幕高度。

.header {
  height: 100vh;
}
.header__left,
.header__right {
  height: 100%;
}

第三，你给右边的单元格添加一个cover大小的背景

.header__right {
  background-image: url();
  background-size: cover;
}

在此处查看实际示例：http://codepen.io/tzi/pen/jWKOdN

寻找一种方法来创建具有重叠文本的网页布局

Looking for a way to create a web layout with overlapping text

html

css

drupal-7

drupal-theming

twitter-bootstrap