如何调整图像并使其响应 - HTML、CSS

Question

我创建了一个网站：点击此处查看，在英雄部分，我放了一张五彩纸屑图像并添加了视差效果。 在桌面视图中，它看起来“不错”但一点也不完美，因为顶部和底部都留有空间。 同样，在移动视图中，它看起来很奇怪并且具有相同的空间像素化。

顶部和底部有空格的桌面视图

移动视图，不可能看到五彩纸屑图像

我尝试了很多方法来修复它但不能。 我希望 css 中的知识渊博的人可以解释为什么会发生这种情况以及我如何解决它。

Answer 1

顶部和底部空间是由元素中的填充引起的：

padding: 125px 0 var(--section-padding);

由于带有五彩纸屑的背景放置在该<section>元素内的<div>中，因此图像出现在该空间之后。

您应该将该填充移动到<div class="hero-confeti">元素，或者将背景图像移动到<section>元素。