如何在React中设置背景图像上的线性梯度?

Question

我已经试了一个多小时了，这是我唯一能想到的。我用CRA建立了应用程序，所以我必须把图像保存在img文件夹中。我是新的反应一些我在这里迷失了做什么/

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

从我可以告诉代码是大部分正确的。我看到的一个问题是你如何传递/设置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对象扩展到styleprop中:

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;