基础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/>代码，它就没有＆＃34;封面＆＃34;效果 - 宽度或高度未完全覆盖。
• 如果我将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

让我们回答你的问题：

  

如果我只是一个标签，它没有＆＃34;封面＆＃34;效果 -   宽度或高度都没有完全覆盖。

我认为你的意思是你想在这个＆＃34;封面＆＃34;？之前放些东西。如果是这样，您可以使用position：absolute和z-index将内容放在其前面。

  

如果我将background-image：设置为，则   图片没有显示出来。

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

  

列上的左/右填充并不能完全允许图像   盖住容器。但是，我不愿意删除它们，因为我不这样做   想打破列的响应功能。

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

Answer 2

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

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