reactjs 如何在react中滚动锁定div的背景图像

vvppvyoh  于 2023-05-06  发布在  React
关注(0)|答案(3)|浏览(191)

DesktopView.js中的内容具有垂直滚动功能。我想把背景调成静态的。基本上,当我向下滚动时,我希望内容向下滚动,但背景img不应该。
我在网上找了一下,试了几种方法,但似乎都不起作用。
代码在下面。告诉我是否需要morw信息。

DesktopView.js

import React from 'react'
import Header from './components/Header'
import Navbar from './components/Navbar'
import Content from './components/Content';

export default function DesktopView() {
  
  const [content, setContent] = React.useState();

  return (
    <div className='desktopView'>
        <Header/>
        <Navbar
          content={content}
          setContent={setContent}
        />
        <Content
          content={content}
          setContent={setContent}
        />
    </div>
  )
}

App.css

.desktopView {
    height: 100vh;
    width: 100vw;
    background-image: url('./assets/bg.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
jgzswidk

jgzswidk1#

我不知道是否理解得很好,但为什么不尝试你的内容把一个溢出,使您backgroundo将在同一个地方,但内容将滚动下来

34gzjxbg

34gzjxbg2#

您也可以通过为内容设置height属性来实现这一点

nle07wnf

nle07wnf3#

在你的css样式表中,试着这样做:

body {
    background-image: url('./assets/bg.png');
    /* ... */
}

这将直接将背景添加到主体。

相关问题