Question

所以我有一些动态高度（基于视口）的部分，我需要能够将img定位为部分之间的分隔符。我能想到的唯一方法是绝对定位图像。问题是我并不总是知道每个部分的固定高度是多少。

那么有没有办法能够添加一个相对于自身定位的部分，而不会在位置上留下空的空间：relative。

CALL MYRPT

SBMJOB CMD(CALL MYRPT)

Answer 1

将分隔符设置为section元素上的伪元素（我已使用::after）。将伪元素相对于截面元素的底部定位。这样，部分的高度可以改变，分隔符将在正确的位置。

注意 - 您必须将div包装在容器中，因此我们可以在最后一部分禁用::after。

＆＃13;

.section {
  position: relative;
  width: 100%;
  height: 200px;
}
.section:not(:last-child)::after {
  position: absolute;
  width: 200px;
  height: 100px;
  bottom: -50px;
  left: calc(50% - 100px);
  background: url(http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg) no-repeat;
  background-size: contain;
  content: "";
  z-index: 1;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

＆＃13;

<div>
  <div class="section blue"></div>

  <div class="section red"></div>

  <div class="section green"></div>
</div>

＆＃13;

Answer 2

如果您的图片尺寸稳定：宽度=＆＃34; 200px＆＃34; height =＆＃34; 100px＆＃34;，然后你可以将它们绝对放置在彩色div中并独立于父高度：

＆＃13;

.section {
  width: 100%;
  height: 50vh;
  position: relative;

}
.section img {
  width: 200px;
  height: 100px;
  display: block;
  position: absolute;
  margin-left: calc(50% - 100px);
  margin-top: -50px;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}

＆＃13;

  <div class="section blue"></div>
  <div class="section red">
     <img  src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
  </div>
  <div class="section green">
      <img  src="http://www.clipartbest.com/cliparts/ace/o9d/aceo9daEi.jpeg" />
  </div>

＆＃13;

绝对覆盖2个div之间的图像

2 个答案: