將父元素的背景圖像拉伸到偽元素？

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>