css - 背景位置未固定在页面上

Question

我正在构建具有多个组件的 React 应用程序，但背景图像有问题:当我在表中添加任何行(在 div 标签上)时，它会上下移动。临时修复:更改背景位置属性。下面是一些代码:

App.js

import React from 'react';

import Header from './components/Header'
import TournamentsTable from './components/TournamentsTable'
import Footer from './components/Footer'

function App() {
  return (
    <div>
      <div id="background"></div>
      <div id="wrapper">
        <Header />
        <TournamentsTable />
        <Footer />
      </div>
    </div>
  );
}

export default App;

样式

#background {
    width: 100%;
    max-width: 2000px;
    height: 100%;
    position: absolute;
    background: url('/images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #111111;
    background-position: center -440px;
    opacity: 0.6;
}

#wrapper {
    position: relative;
}

Answer 1

你首先需要确保你的Body占据了整个页面:

body {
    min-height: 100vh
}
#background {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #111111 url('/images/background.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.6;
}

然后在你的样式中添加“背景附件”:

#background {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #111111 url('/images/background.jpg') no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        opacity: 0.6;


    }