背景中的CSS渐变如何随着区块大小进行缩放

Question

我有一个页面区域，分为两部分。左侧是行容器中的内容，而另一半是超出容器范围的图像。该区域具有渐变背景，帮助产生笔记本电脑放在悬崖上的效果。以下是我要完成的屏幕截图：

( 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.我不知道如何使渐变停留在同一位置（与图像成比例地调整大小），随着视口的重新调整大小。

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

- 4ever Youngz

---

请问能否更新CodePen链接？404错误。 - actimel

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. Flexbox。我使用了一个带有 display:flex 属性的 section，并在其中添加了两个子元素 div，它们都具有 display:inline-block 属性。我将你的渐变色添加到了 section 的背景中。
2. 我给两个 div 都添加了 flex-basis:50%，以使它们成为两个等宽的列。
3. 我给图像添加了 max-width:100%，这样它就不会超出其列的范围。如果您想要它超出范围，请尝试使用 max-width:120% 或类似的属性，并在图像上添加负的 margin-left。
4. 我在文本 div 上使用了 align-self:center，以使其在 section 中垂直居中对齐。

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

- SpyderScript