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

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

Flexbox的。我使用section display:flex和两个div display:inline-block section。我将渐变添加到flex-basis:50%。
我在div两个max-width:100%添加max-width:120%以制作两个同样宽的列。
我提供了图片margin-left，因此它不会延伸到其列之外。如果您需要，请尝试align-self:center或类似内容，并在图片中添加否定的section。
我在文本div上使用了In [409]: lst = [4, 2, 1, 3] In [410]: srt = pd.Series(np.arange(len(lst)), index=lst) In [411]: srt Out[411]: 4 0 2 1 1 2 3 3 dtype: int32 In [412]: df.assign(x=df.col2.map(srt)) Out[412]: col 1 col2 col 3 x 0 a 3 3 3 1 b 2 5 1 2 c 4 9 0 3 d 1 43 2 In [413]: df.assign(x=df.col2.map(srt)).sort_values('x') Out[413]: col 1 col2 col 3 x 2 c 4 9 0 1 b 2 5 1 3 d 1 43 2 0 a 3 3 3 In [414]: df.assign(x=df.col2.map(srt)).sort_values('x').drop('x',1) Out[414]: col 1 col2 col 3 2 c 4 9 1 b 2 5 3 d 1 43 0 a 3 3，因此它会在Declare @Cod_Func as int; set @Cod_Func = 10310 BEGIN SELECT D.Cod_Regional, D.Nom_Regional + ' (' + CAST(COUNT(A.ID_Chegada) as varchar) + ')' as Nom_Regional FROM APS_CHEGADA A (NOLOCK) INNER JOIN APS_AcessoFilial B (NOLOCK) ON A.Cod_Regional = B.Cod_Regional AND A.Cod_Filial = B.Cod_Filial AND B.flg_situacao = 1 INNER JOIN COR_Filial C (NOLOCK) ON A.Cod_Regional = C.Cod_Regional AND A.Cod_Filial = C.Cod_Filial INNER JOIN COR_Regional D (NOLOCK) ON C.Cod_RegionalAtual = D.Cod_Regional WHERE A.ID_ChegadaStatus = 2 AND B.Cod_Func = @Cod_Func AND A.FLG_SITUACAO = 1 GROUP BY D.Cod_Regional, D.Nom_Regional End;内垂直对齐。

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

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

1 个答案: