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

Question

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

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

目标：

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

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 渐变应用于该部分。图像是绝对定位的，因此它不会成为该容器的一部分，并且可以延伸到视口的右侧。

我运行遇到了一些问题。

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

我真的很困惑如何获得屏幕截图中的功能和设计。

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%;
}

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

弹性框。我使用了一个 section 和 display:flex 以及两个 child div 和 display:inline-block。我将你的渐变添加到 section.
我在两个 div 中添加了 flex-basis:50% 以形成两个等宽的列。
我给了图像 max-width:100% 所以它不会超出其列。如果您愿意，请尝试使用 max-width:120% 或类似的东西，并向图像添加负片 margin-left。
我在文本 div 上使用了 align-self:center，因此它会在 section 内垂直对齐。

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

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

CSS Gradients in Background Scaling with Section Size

css

gradient