背景缩放中的 CSS 渐变与截面大小

Question

我有一个页面部分被分成两部分。左侧是行容器中的内容，而另一半是容器外部的图像。这部分有一个渐变 BG，有助于产生笔记本电脑坐在窗台上的效果。这是我正在尝试完成的屏幕截图：

(https://monosnap.com/file/fX2jGJ9HcEuw6xsSFK8TzbdO023RMd)

目标：

1. 让图像占据视口的 50% 并触摸右侧 屏幕。内容必须保留在内容容器（行）中
2. 渐变保持在屏幕截图所示的位置。
3. 该部分在缩放时会在高度上做出相应的响应。

HTML：

<section class="full-width snocruapp-offtheslopes tgs-section-titles half-and-half-section hide-for-small-only">
    <div class="row">
        <div class="large-6 medium-6 columns">
          <div class="copy--with-image copy--align-left">
            <div class="tgs-section-titles"><h3>Off the Slopes Counterpart</h3>
<hr>
<p>One important piece of the user experience was that the website functioned more than just a marketing tool. We developed the dashboard area so when users logged in, they were provided with personalized data, leaderboard stats and track heat mapping.</p>
</div>
          </div>
        </div><!--end large 6 right -->
        <div class="large-6 medium-6 columns"></div>
    <div class="image--align-to-window image--align-right">
         <picture>
            <source srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/slopes-image2.png" media="(min-width: 1024px)">
            <img srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/sno_mbl_counterpart_nograd.png" alt="Half Image">
        </picture>
    </div>
    </div><!--end row -->
</section>

我创建了一个包含内容的 Foundation 网格，因此内容相应地保持在原位。 接下来，我创建了一个图像 div 并将图像绝对定位在网格的另一半上。

CSS：

* {
  margin: 0;
  padding:0;
}

section {
    display: block;
    overflow: hidden;
}

.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
}

.half-and-half-section {
    position: relative;
    margin: 50px 0;
}

.half-and-half-section .image--align-to-window {
    position: absolute;
    top: 0;
}

.half-and-half-section .image--align-right {
    right: 0;
    width: 50%;
}

.snocruapp-offtheslopes {
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 75%, #ffffff 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

我将 CSS 渐变应用于该部分。图像是绝对定位的，因此它不会成为该容器的一部分，并且可以延伸到视口的右侧。

我遇到了一些问题。

1. 除非我向该部分添加填充，否则图像会被截断。
2. 我不知道如何在调整视口大小时让渐变保持在同一位置（按比例调整图像大小）。

我真的不知道如何获得屏幕截图中的功能和设计。

Answer 1

两年后……

this 是你要找的吗？

代码因为我必须：

HTML

<section>
  <div id="text">
    <h1>
     Off the Slopes Counterpart
    </h1>
    <hr>
    <p>
      Test test test test
    </p>
  </div>
  <div id="image">
    <img src="http://i.imgur.com/Q04uiB1.png">
  </div>
</section>

CSS（减去美学）

section {
  display: flex;
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 75%, #ffffff 75%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  overflow:hidden;
}

section div {
  display: inline-block;
  flex-basis: 50%;
}

#text {
  align-self: center;
}

#image img {
  max-width: 100%;
}

我是怎么做到的？（除了拥有无与伦比的艺术天赋）

1. 弹性盒。我用section 和display:flex 和两个孩子divs 和display:inline-block。我将你的渐变添加到section 的背景中。
2. 我在两个divs 中添加了flex-basis:50%，以形成两个同样宽的列。
3. 我给了图像max-width:100%，所以它不会延伸到它的列之外。如果您愿意，可以尝试使用max-width:120% 或类似的东西，然后在图片中添加一个否定的margin-left。
4. 我在文本 div 上使用了 align-self:center，因此它会在 section 内垂直对齐。

如果这不能完全回答您的问题，我很乐意编辑我的解决方案。