使用CSS將標題頁面拆分爲圖像

我面臨的一個問題是，將主頁面佈局中的標題拆分爲左下角至右上角。我找到的所有資源都將它們分成兩種顏色。但是，當我想添加圖片時，我看不到任何結果。使用CSS將標題頁面拆分爲圖像

見我做的代碼，我不知道如何消除它們之間的空間

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

我做了上述相同的代碼，但我想他們在一個頁面的圖像之間有空間。只是爲了清楚地看到這個圖像，它可能會給你一個想法。

來源

2017-11-10 Abdullah

你不能與線性gradien使用圖像。你能解釋一下你需要達到什麼嗎？ –

@TemaniAfif你能看到我的更新問題 – Abdullah

我投票重新打開它，因爲它更清楚，希望你會得到更多的選票;）@Blazemonger –

你的代碼幾乎是好的，只是進行簡單地錯位置。你應該把它們放在一個容器內的絕對位置，它們應該像層一樣（一個在另一個之上）。我也取代了夾路徑的值在0到100％，所以這是比較通用的：

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>

來源

2017-11-12 08:21:55

它的工作原理，但我做了一些改變，非常感謝你 – Abdullah

使用CSS將標題頁面拆分爲圖像

回答

相關問題