背景中的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> 

我創建了一個基礎網格內容，以便該內容在相應的地方停留。 接下來，我創建了一個圖像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. 我不知道如何讓漸變留在同一個地方（調整大小與圖像成比例）隨着視口重新調整大小。

我真的很茫然，如何在屏幕截圖中獲得functanlity和設計。

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和兩個孩子div與display:inline-block。我將您的漸變添加到section的背景中。
2. 我將flex-basis:50%添加到div s中以製作兩個同樣寬的列。
3. 我給了圖像max-width:100%所以它不會擴展到它的列之外。如果你想要，可以試試max-width:120%或類似的東西，並在圖像中添加一個負值margin-left。
4. 我在文本div上使用了align-self:center，所以它將在section內部垂直對齊。

如果這完全不能完全回答您的問題，我很樂意編輯我的解決方案。