使用CSS将Header页面拆分为图像

Question

我遇到的问题是将主页面布局中的标题分为两个图像，从左下角到右上角。我发现的所有资源都将它们分成两种颜色。但是，当我想添加图片时，我看不到任何结果。

查看我所做的代码，我不知道如何删除它们之间的空格

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

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

Answer 1

你的代码几乎是好的，你只是做错了职位。你应该将它们放在容器内的绝对位置，它们应该像层一样（一个在另一个之上）。我还用0和100％替换了clip-path中的值，因此它更通用：

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>