背景图像过度放大，在iPhone浏览器中不清晰可见

Question

这是iPhone浏览器中网页渲染的截图

背景图过度放大，不清晰可见。

下面是桌面浏览器显示的图像。引导样式在桌面浏览器中工作得很好，但在移动浏览器中不行。

这是我在NextJs中使用的样式

<div

style={{
backgroundImage: `url(${bg.src})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundAttachment: "fixed",
minHeight: "100vh",
}}
>
<NavBar />
<FirstSection />
</div>

如何解决这个问题?

Answer 1

这个问题是由backgroundAttachment: "fixed"引起的。通过去除背景附件，解决了固定问题，但图像失去视差效果。我用npm package https://www.npmjs.com/package/react-parallax

解决了这个问题

import { Parallax } from "react-parallax";
import bg from "../public/img/hero2.jpg";
<Parallax className="min-vh-100 hero" bgImage={bg.src} strength={300}>
<NavBar />
<FirstSection />
</Parallax>