多层视差图像中出现奇怪的图形错误

Question

我目前正在构建一个具有多层 PNG 图像的视差滚动效果的部分。

链接：https://albertyhu.github.io/tutorial/content/

向下滚动页面即可观察到3D效果。

如果您使用的是 Chrome、Opera 或 Edge 浏览器，向下滚动时您会注意到图像底部存在图形问题。出现一个矩形孔，它部分遮挡了图像的底部。由于某种原因，此问题不会出现在 Firefox 上。

我用 HTML 和 CSS 构建了图像。这些图像是通过剪切原始风景图像并在 Photoshop 上从这些组件创建多个图层来创建的。

以下视差图像是使用以下代码构建的：

<section
    class = "sectionStyle"
>
    <header class="header">
        <img src={Layer1} alt = "layer1" class ="layer1Style" />
        <img src={Layer2} alt = "layer2" class ="layer2Style" />
        <img src={Layer3} alt = "layer3" class ="layer3Style" />
        <img src={Layer4} alt = "layer4" class ="layer4Style" />
        <img src={Layer5} alt = "layer5" class ="layer5Style" />
        <h1
            class="text-center text-2xl font-bold"
        >Welcome!</h1>
    </header>
    <div class = "bg-black h-fit text-white text-base py-10 ">
        <div
            class="w-11/12 mx-auto"
        >
            <p>//written content</p>
//skip
        </div>
    </div>
</section>

可以在以下 Github 页面中查看： https://github.com/Albertyhu/tutorial/blob/main/src/components/parallaxHero.astro

以下样式表用于添加样式并创建视差效果：

https://github.com/Albertyhu/tutorial/blob/main/src/styles/parallaxHeroStyle.css

我很感谢有人知道当用户向下滚动时是什么导致视差图像底部出现矩形孔的人提供的任何帮助。

编辑： 我创建了另一个具有视差图像的页面。它遵循与前一个相同的 HTML 标记格式和 CSS 样式。不幸的是，当使用 Chrome、Opera 和 Edge 查看网站时，它会显示与网站上出现的矩形孔相同的问题：

查看链接：https://albertyhu.github.io/tutorial/los-angeles/

Answer 1

所以我发现问题是图像的文件大小太大。一旦我压缩了所有图层的大小，图形故障就不再出现。