将父元素的背景图像拉伸到伪元素？

Question

我正在尝试将父元素的background-image拉伸到伪元素。

我目前正在使用下面的代码，从某种意义上说，它使用的是相同的图像，但位置不正确（请参见屏幕截图）。 我希望这是无缝的。

.parent {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.parent::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: inherit;
  z-index: 1;
}

将父母的background-attachement为fixed似乎可以使其工作，但随后我对父母产生了不需要的视差效果。

有没有办法让我可以拉伸背景图像但避免视差？ 非常感谢所有帮助！

Answer 1

使伪元素覆盖整个元素，只有它的背景可见：

 .parent { position: relative; background-image:url(https://picsum.photos/id/1018/800/800); background-size: cover; background-repeat: no-repeat; background-position: center; position:relative; z-index:0; height:100px; } .parent::after { content: ''; position: absolute; z-index:-1; bottom: -15px; left: 0; width: 100%; top:0; background: inherit; z-index: -1; }

 <div class="parent"> </div>