修复滚动到某个部分后的背景图像更改

Posted 2023-03-07

【中文标题】修复滚动到某个部分后的背景图像更改

【英文标题】：Fixed Background Image Change After Scrolling To A Section

【发布时间】：2021-11-19 05:35:37

【问题描述】：

我是一名前端实习生，被要求尝试复制一个网站样机视频，该视频显示具有固定背景的滑动内容，但在达到某个部分标签后，固定背景会切换到不同的背景。我正在使用顺风 CSS 来尝试模拟效果。以下是我模仿我认为类似的东西的方法：

<section class="bg-bg0 md:bg-bgB bg-fixed bg-no-repeat bg-center">

我通过为部分顺风 css 提供上述类来实现效果。当它到达我要更改背景的部分时，通过将背景类从bg-bgA切换到bg-bgB来更改背景，并且达到了效果，但是在过渡时，页面滞后可怕。有没有更有效的方法来实现这种效果？如果我的解决方案是垃圾箱起火，或者我问的方式有误，我想提前道歉。

【参考方案1】：

发现问题，背景图片太大，将它们缩小到原来大小的 75% 就可以了。