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

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

您应该能够简单地向您的 HTML 添加具有 position: fixed; z-index: -1 且具有指定大小的 img 元素。这会将其置于所有其他内容之后，固定在视口中。
要在您的网站上放置两张或多张图片的一部分，您可以使用 clip-path-属性结合 JavaScript 将图片剪裁到特定高度，或许可以使用其父元素的 BoundingClientRect 作为界限。
将它与 window.onscroll-event 结合使用可能有助于提高性能，但我还没有测试过它。

Answer 2

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

background-attachment: fixed;

将此属性值对应用于元素后（您也可以使用 shorthand 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>

Answer 3

.bg-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: "";//Your image here
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div className={"bg-image"}>
    // Content
</div>

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

Is there a way to make a fixed background images without lags?

html

css

image

styling

reactjs