Html 有没有一种方法可以使固定的背景图像没有延迟？

我已经尝试了很多方法将背景图像制作成固定图像。我也看到过一些网站，它们有固定的图像，但不会造成延迟。但遗憾的是，我仍然没有找到方法去做

以下是我当前尝试的视频：

我的代码是：

import React from 'react'

const useStyles = makeStyles(theme => ({
    header: {
        position: "sticky",
        top: -63,
        zIndex: 101,
        height: "220px",
        '@media (max-width:600px)': {
            zIndex: 99,
        },
    },
    root: {
        backgroundAttachment: "fixed",
        flexWrap: "nowrap",
        flexDirection: "column",
        backgroundPosition: "50% 50%",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        height: "100%",
        width: "100%",
        display: "flex",
    }
}))
const Parallax = (props) => {
    const classes = useStyles();
    return (
        <div className={classes.root} style={{ backgroundImage: `url(${props.image})` }}>
            <div className={classes.header}>{props.header}</div>
            <div style={{ ...props.style, backgroundColor: props.theme.palette.contrast }}>{props.children}</div>
        </div>
    )
}

export const ParallaxContainer = withTheme(Parallax);

从“React”导入React
const useStyles=makeStyles（主题=>({
标题：{
位置：“粘性”，
前-63，
zIndex:101，
高度：“220px”，
“@介质（最大宽度：600px）”：{
zIndex:99，
},
},
根目录：{
背景附件：“固定”，
flexWrap：“nowrap”，
flexDirection:“列”，
背景位置：“50%50%”，
背景重复：“不重复”，
背景尺寸：“封面”，
高度：“100%”，
宽度：“100%”，
显示：“flex”，
}
}))
常量视差=（道具）=>{
const classes=useStyles（）；
返回(
{props.header}
{props.children}
)
}
export const ParallaxContainer=withTheme（视差）；

编辑：@Rounin建议的解决方案对我来说很好。我还发现图像压缩并不是全部。减小高分辨率图像的大小也很重要。

---

对我来说，它也有帮助，将图像的大小调整到每长边最大2000px。

你应该可以简单地添加一个

img

-元素，并且

位置：固定；z-index:-1

，具有指定的HTML大小。这将使其位于所有其他内容之后，并固定在视口中。
要在站点上保留两个或多个图像的一部分，您可以使用

clip path

-属性与JavaScript结合使用，以特定高度剪裁图像，可能使用它们的父元素作为边界。

---

将其与

窗口相结合。onscroll

-事件可能有助于提高性能，但我尚未对其进行测试。

创建视差效果的关键CSS属性值对是正确的：

background-attachment: fixed;

一旦您将此属性-值对应用于元素（您也可以使用速记

background

属性来执行此操作，如下面的示例所示），您就基本完成了设置

工作示例：

正文{
高度：200vh；
边缘顶部：180像素；
}
.视差效应{
宽度：300px；
高度：180像素；
保证金：0自动；
背景：rgb（127191255）url（'https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg’）中心/盖无重复固定；
}

.bg img{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景图像：；//此处显示您的图像
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}


//内容
感谢您的示例。我尝试过使用它，但如果我有4个部分，它仍然会导致延迟。我对速记属性的另一个问题是，background size属性不起作用。（我用的是Chrome）经过更多的测试，我发现我的图像分辨率太高了，以至于我的CPU无法正常处理。所以我重新缩放了我的图像，效果很好。
<div className={"bg-image"}>
    // Content
</div>