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

Question

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

看到我做的代码，我不知道如何删除它们之间的 space

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

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

Answer 1

你的代码几乎是好的，你只是在位置上做错了。您应该使它们在容器内处于绝对位置，它们的行为应该像层一样（一层在另一层之上）。我还将剪辑路径中的值替换为 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>

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

Split the Header page into to images using CSS

css

background-image

clip-path