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>

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

我面临的问题：

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

当前代码：

标记:

<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

让我们来解决你的问题：

If I just is an tag, it doesn't have the "cover" effect -- either the width or height is not fully covered.

我猜你的意思是你想在这个 "cover" 前面放一些东西？如果是这样，您可以使用 position:absolute 和 z-index.

将内容放在它前面

if I set background-image: to the , the image doesn't show up.

鉴于上面的 css，div.thumb-bg 没有维度。添加高度和宽度。

the left/right padding on columns doesn't allow the image to entirely cover the container. However I'm hesitant to remove them as I dont want to break the responsive functionality of columns.

您可以使用实用程序有选择地删除这些列的填充 class，这不会阻止它响应。

Answer 2

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

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

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

Foundation 5 - make background-image fill entire column

html

css

background-image

zurb-foundation