html - 有没有办法制作固定的背景图像而没有滞后？

Question

我试过很多方法把背景图片做成固定图片。而且我已经看到网站上有那些固定图像而不会造成延迟。但遗憾的是，我仍然没有找到这样做的方法。

这是我当前尝试的视频: https://streamable.com/hkk6d6

还有我的代码:

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);

编辑:@Rounin 建议的解决方案对我来说效果很好。我还发现图像压缩并不是全部。减小高分辨率图像的尺寸也很重要。
对我来说，它也有帮助，将图像大小调整为每长边最大 2000 像素。

Answer 1

你说得对，创建视差效果的关键 CSS 属性值对是:

background-attachment: fixed;

将此属性值对应用到元素后(您也可以使用速记 background 属性来执行此操作，如下例所示)，您几乎已经准备就绪。

工作示例:

body {
height: 200vh;
margin-top: 180px;
}

.parallaxEffect {
width: 300px;
height: 180px;
margin: 0 auto;
background: rgb(127, 191, 255) url('https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg') center / cover no-repeat fixed;
}

<div class="parallaxEffect"></div>