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

【问题标题】：How do I set a linear gradient over a background image in React?如何在 React 中的背景图像上设置线性渐变？
【发布时间】：2021-11-27 02:38:36
【问题描述】：

我已经尝试了一个多小时，这是我唯一能想到的。我使用 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;
}

【问题讨论】：

标签： html css reactjs background-image linear-gradients

【解决方案1】：

据我所知，代码大部分是正确的。我看到的一个问题是您如何传递/设置 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;

【讨论】：