html - Foundation 5 - 使背景图像填充整个列

Question

我正在尝试使用 Zurb Foundation 创建以下效果。基本上，两列，每半个屏幕:

<div class="small-6 columns"><!-- MAKE IMAGE COVER HERE --></div>
<div class="small-6 columns">
   <h1>title</h1>
   <p>Content</p>
</div>

我正在尝试实现以下视觉效果:

我遇到的问题:

• 如果我只是一个<img/>标签，它没有“覆盖”效果——宽度或高度没有被完全覆盖。
• 如果我设置background-image:到 <div class='small-6 columns'> ，图像不会显示。
• 列上的左/右填充不允许图像完全覆盖容器。但是，我对删除它们犹豫不决，因为我不想破坏列的响应功能。

当前代码:

标记:

<div class="small-12 medium-6 columns thumb-bg"></div>
<div class="small-12 medium-6 columns>
  <h1>title</h1>
  <p>content</p>
</div>

SCSS:

  .thumb-bg {
    background-image: url('www.image-url.com');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
  }

Answer 1

当您将其作为背景时，该图像不会显示，因为该元素实际上没有内容。您必须指定宽度和高度。如果它不会改变，你可以使用:

.thumb-bg{
    background: url('www.image-url.com') center center no-repeat;
    background:cover;
    width: 400px;
    height: 400px;
}