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

我做了上述相同的代码，但我想他们在一个页面的图像之间有空间。只是为了清楚地看到这个图像，它可能会给你一个想法。

你不能与线性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>

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

使用CSS将标题页面拆分为图像

相关推荐