【问题标题】:Looking for a way to create a web layout with overlapping text寻找一种方法来创建具有重叠文本的 Web 布局
【发布时间】:2016-01-29 11:38:32
【问题描述】:

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

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

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

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

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

谢谢!

【问题讨论】:

    标签: html css twitter-bootstrap drupal-7 drupal-theming


    【解决方案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

    【讨论】:

    • 这就像一个魅力!您对如何让左列中的文本也到达并重叠右列有什么建议吗?我想从我的示例图像中获取“2016”以查看右栏中的图像。谢谢!
    • 我会这样做:codepen.io/tzi/pen/XXYmmr 如果你愿意,我可以更新我的答案;)
    • 这正是我的意思,我认为这是一个非常聪明的方法。非常感谢!!
    猜你喜欢
    • 2011-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-11
    • 1970-01-01
    相关资源
    最近更新 更多