重叠图像与另一个图像

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重叠图像与另一个图像相关的知识,希望对你有一定的参考价值。

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

以上是关于重叠图像与另一个图像的主要内容,如果未能解决你的问题,请参考以下文章

片段中的视频视图与另一个片段重叠

滚动时在另一个片段视频视图中重叠一个片段的视频拇指

如何叠加图像

如何叠加图像

UIPangestureRecognizer - 一个图像与另一个图像相交

在 C++ 中计算相似图像的偏移/倾斜/旋转