CSSを使用してヘッダページを画像に分割

Question

メインページのレイアウトのヘッダーをの下の2つの画像に分割する際の問題に直面しています。から右上です。私が見つけたすべてのリソースは2つの色に分割されています。しかし、写真を追加したいときは、結果が見えませんでした。

私はコードを参照してくださいと私は

class-image-1 { 
    background-image: url(/img/imag-1-bg.png); 
    height: 100vh; 
    -webkit-clip-path: polygon(1px 100vh,100% 1px,311px -1px,0px 0px); 
    background-repeat: no-repeat; 
    position: relative; 
    background-position: center; 
    background-size: cover; 
    background-attachment: fixed; 
    margin: 0 auto; 
} 

class-image-2{ 
    background-image: url(/img/bg.jpg); 
    height: 100vh; 
    -webkit-clip-path: polygon(0px 100vh,100% 100vh,100% 1px); 
    position: relative; 
    background-position: center; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    margin: 0 auto; 
} 

それらの間のスペースを削除する方法がわからない私は、上記と同じコードをしましたが、私は私は1つのページでそれらをしたい画像との間のスペースを得ました。ちょうどこのイメージをはっきりと見るために、あなたにアイデアを与えるかもしれません。

Answer 1

あなたのコードはほとんど良いですが、あなたは、単に位置に間違っています。コンテナ内で絶対位置にする必要があります。レイヤーのように振る舞う必要があります。それはより一般的ですので、私はまた、0〜100％でクリップパスの値を置き換え：

あなたはリニアgradienで画像を使用することはできません

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 600px; 
 
} 
 

 
.banner { 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
.class-image { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.class-image-1 { 
 
    background-image: url(https://lorempixel.com/800/800/); 
 
    -webkit-clip-path: polygon(0 100%, 100% 0, 100% 0px, 0 0); 
 
} 
 

 
.class-image-2 { 
 
    background-image: url(https://lorempixel.com/800/700/); 
 
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0); 
 
}

<div class="banner"> 
 
    <div class="class-image class-image-2"> 
 
    </div> 
 
    <div class="class-image class-image-1"> 
 
    </div> 
 
</div>