斜底背景的CSS

Question

我想重現我的樣機：http://imgur.com/ZsR88fe

但我不知道如何歪曲我的背景圖片，只在底部。對於諾凡我嘗試轉換歪斜，但所有的圖像是歪斜的，頁面的頂部看起來很難看： http://imgur.com/TkUgppW

我該怎麼辦才能解決它？

在此先感謝

Answer 1

爲了使底部歪斜的圖像與CSS，你會需要一些包裝：

• 所有文本內容的div
• 圖片的包裝，將創建歪斜和隱藏歪斜區域包含什麼，但英雄的畫面
• 圖片DIV

然後，您需要將相反的偏斜應用於圖像div，使其不會扭曲。在此之後，您必須調整位置以確保儘可能多的圖像可見並且隱藏頂部傾斜。也許有一個更聰明的解決方案，我只是使用硬編碼的像素值。

Here's the demo，這裏是最重要的位：

HTML

<div class="hero"> 
    <div class="bg-img-wrapper"> 
    <div class="bg-img"></div> 
    </div> 
    <div class="hero-content"> 
    <h1>Cool company slogan</h1> 
    <p>Catchy subslogan</p> 
    </div> 
</div> 

SCSS（只需更換的變量，這將是有效的CSS，但他們與可讀性幫助這裏）

$skewDeg: 5deg; 
$offset: 70px; 

.hero { 
    height: 100vh; // Make the hero area take 100% height 
    overflow: hidden; // Child's skew will cause overflow, so we hide it here 
    position: relative; // Children will be positioned absolutely relative to this 
} 

.bg-img-wrapper { 
    transform: skewY($skewDeg); 
    position: absolute; 
    top: -$offset; // Move the top skew offscreen 
    bottom: $offset; // Move the skewed area up a bit so more of it is visible 
    right: 0; 
    left: 0; 
    overflow: hidden; // Hide the areas that we skewed away 
} 

.bg-img { 
    background: url('https://unsplash.it/1280/720/?random') center no-repeat; 
    background-size: cover; 
    position: absolute; 
    top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen 
    bottom: -$offset; 
    right: 0; 
    left: 0; 
    transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again 
} 

.hero-content { 
    position: relative; // Relative positioning here makes the hero content visible 
}