如何在 React 中的背景图像上设置线性渐变？

Question

我已经尝试了一个多小时，这是我唯一能想到的。我用 CRA 构建了应用程序，所以我必须将图像保存在 img 文件夹中。我是 React 的新手，有些我不知道该怎么做/

    import NavBar from "./NavBar";
    // import SocialMedia from "../socialmedia/SocialMedia";
    import classes from './MainView.module.css';
    import background from '../../img/pic2.jpg';
    
    
    
    function MainView() {
        const style = {
            backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
        };
    
        return (
            <>
                <NavBar />
                <section style={{ style }}
                    className={classes.top}>
                    <div>
                        <p>My Name</p>
                        <p>Full Stack Web Developer</p>
                    </div>
                </section>
                {/* <SocialMedia /> */}
            </>
        )
    }
    
    export default MainView;






@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Trispace&display=swap');

.top {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    width: 100%;
    height: 100%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
}

Answer 1

据我所知，代码大部分 正确。我看到的一个问题是你如何 pass/set style 道具。您正在传递一个带有 style 属性的对象，其中 CSS 规则嵌套得更深。

<section
  style={{ style }} // <-- style properties nested too deeply!
  className={classes.top}
>
  ...
</section>

这导致 style 看起来更像这样的道具：

{
  style: {
    backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`,
  }
}

当你只想：

{
  backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
}

解决方案是只传递 style 作为 prop 值：

style={style}

或将 style 对象散布到 style 属性中：

style={{ ...style }}

我建议前者。

完整示例：

import NavBar from "./NavBar";
// import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';

function MainView() {
  const style = {
    backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
  };

  return (
    <>
      <NavBar />
      <section
        style={style} // <-- pass the style object directly
        className={classes.top}
      >
        <div>
          <p>My Name</p>
          <p>Full Stack Web Developer</p>
        </div>
      </section>
      {/* <SocialMedia /> */}
    </>
  )
}

export default MainView;

如何在 React 中的背景图像上设置线性渐变？

How do I set a linear gradient over a background image in React?

html

css

background-image

linear-gradients

reactjs