css - 如何在我的 React 项目中放置颜色叠加层（比如红色）？

Question

我是新来的反应并尝试尝试将 Netflix 网站的一部分构建为克隆。但是我遇到了如何在背景图像上放置颜色覆盖的问题。

这是我的 App.js

import GlobalStyles from "./globalStyles";
import Login from './components/login/Login';

function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Login />
    </div>
  );
}

export default App;

这是 globalStyles.js

import { createGlobalStyle } from 'styled-components/macro';

const GlobalStyles = createGlobalStyle`
  html {
    font-size: 100%;
    box-sizing: border-box;
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }

  a,
  a:visited,
  a:hover {
    text-decoration: none;
  }

  li,
  li a {
    text-decoration: none;
    list-style: none
  }

  body {
    background-color: red;
  }
`;


export default GlobalStyles;

这是我的 Login.js

import React from 'react';
import styled from 'styled-components/macro';

const Login = (props) => {
  return (
    <div>
      <Container>
        <Content>
          <h1>Temp Text</h1>
        </Content>
        <BgImage />
      </Container>
    </div>
  )
}

const Container = styled.section`
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100vh;
`;
const Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: 100%;
  min-height: 100vh;

  position: relative;
`;
const BgImage = styled.div`
  background-image: url('/images/BgImage.jpg');
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 100%;
  z-index: -1;

  opacity: 0.4;
`;


export default Login;

我可以让红色覆盖不透明度为 0.4 的背景图像的唯一方法是将背景颜色红色放在我的 globalStyles.js 中的主体上。

我做了一个测试，并用 lorem 文本段落填充了页面的其余部分，我得到了红色背景。

如何将红色不透明层仅放置在背景图像上？

ps 我希望我已经正确添加了示例代码，因为我是新手。

标签： cssreactjsstyled-components