Question

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

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

HTML＆amp; 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。

Answer 1

试试这个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;
}

使用其他图片重叠图片

1 个答案: