Css 视差背景不覆盖溢出的内容

我想创建一个视差效果的基础上

使用该解决方案，背景不会覆盖溢出的内容。 我希望在滚动时看到背景图像的下半部分，而不是空白区域

视差{ 溢出x：隐藏； 溢出y：滚动； 高度：150像素； 透视图：1px； } .视差层{ 位置：绝对位置； 颜色：白色； 左侧填充：20px； 排名：0； } .视差层-背面{ 背景：url（'https://www.w3schools.com/w3images/nature.jpg'); 变换：translateZ（-2px）标度（3）； 背景尺寸：封面； 背景位置：顶部； 身高：100%； /*高度：内容高度*/ }

任何内容


那


原因


溢出

正如您可能注意到的，这是由于使用了

高度：100%

。另一个想法是将层用作主要内容的伪元素，您可以使其适合其高度：

视差{ 溢出x：隐藏； 溢出y：滚动； 高度：150像素； 透视图：1px； } .视差层{ 位置：绝对位置； 颜色：白色； 左侧填充：20px； 排名：0； 左：0； 右：0； } .视差层：之前{ 内容：“； 位置：绝对位置； 左：0； 排名：0； 右：0； 背景：url（'https://www.w3schools.com/w3images/nature.jpg'); 变换：translateZ（-2px）标度（3）； 背景尺寸：封面； 背景位置：顶部； 身高：100%； z指数：-1； }

任何内容


那


原因


溢出