重叠图像与另一个图像

Posted 2021-04-23

1. 第一张图像以其多重混合模式及其颜色（100％x 1172像素）作为背景。
2. 在这个容器的最底部是一个块（50％x 520px）具有相同的背景，但没有混合模式。
3. What exactly I'm trying to reach。

- 我们的想法是将这两个图像保持为一个至少≥= 920px断点宽度的图像。

html和CSS标记

.main-container {
  display: flex;
  height: 1172px;
  width: 100%;
  position: relative;
}

.main__fluid {
  display: flex;
  flex: 1;
}

.main__fluid--image {
  background: url(https://i.imgur.com/eRnGawp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.main__inner-block {
  display: flex;
  align-items: flex-end;
  position: relative;
  height: 520px;
  width: 50%;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  border-radius: 10px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.28);
  z-index: 9;
}

.main__inner-block--image-mask {
  overflow: hidden;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: url(https://i.imgur.com/Piu55zF.jpg);
  background-repeat: no-repeat;
  background-position: top -36rem center;
  max-width: 100%:
}

.main__navigation {
  height: 80px;
  width: 100%;
  background-color: #5ec8c3;
  position: relative;
}

.footer {
  background-color: #1f5c71;
  height: 91px;
  position: relative;
  top: -5rem;
}

<div class="main-container">
  <div class="main__fluid main__fluid--image">
    <div class="main__inner-block main__inner-block--image-mask">
      <div class="image"></div>
    </div>
  </div>
</div>

目前有这个：

jsfiddle jsfiddle (UPD)

UPD：发现有点局部解决方案

我将为大图像（使用混合模式）指定父级，为较小图像指定父级（没有混合模式）

实际上我只是从父母或/删除属性background-size并添加background-size: auto auto到它的样式，当然，这个想法是防止在Y轴上调整大小。然后做了调整，让孩子通过background-position和最后一个调整它的相对父母，将它们与background-position: center对齐。通过这些更改更新了jsfiddle。

答案

试试这个css块。它会将两个图像对齐到相同的位置。

.main-container {
  display: flex;
  height: 1172px;
  width: 100%;
  position: relative;
}

.main__fluid {
  display: flex;
  flex: 1;
}

.main__fluid--image {
  background: url(https://i.imgur.com/Piu55zF.jpg);
  background-size: cover;
  position: relative;
  background-color: #51c8c4;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: top -27rem center;


}

.main__inner-block {
  position: relative;
  height: 45%;
  width: 80%;
  margin-top: 20.5%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  box-shadow: 1px 2px 1px 0px rgba(0, 0, 0, 0.28)
}

.main__inner-block--image-mask {
  overflow: hidden;
}

.image {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(https://i.imgur.com/Piu55zF.jpg);
  background-repeat: no-repeat;
  background-position: top -45rem center;
}