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

Question

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

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

我正在使用带有基于引导程序的主题的 Drupal。

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

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

谢谢！

Answer 1

首先，您应该使用引导网格将页面分成两部分

<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>

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

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

第三，在右侧单元格中添加cover 大小的背景

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

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