【发布时间】：2021-02-21 23:14:57
【问题描述】：
我想在我的背景图片上叠加背景。我想在下面实现一些目标：
请检查我的密码箱
image: {
backgroundImage:
"linear-gradient(0deg, rgba(255, 0, 150, 0.3), #06a303), url(http://lorempixel.com/800/600/nature/2)",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center"
},
【问题讨论】：
-
所以我查看了您的沙箱，我看到一个颜色渐变覆盖了图像。问题是什么？请具体。
-
@DrewReese。我希望它覆盖整个图像。并设置不透明度，因为我将在其上添加文字。所以需要看清楚文字。我希望你明白我的意思。谢谢
-
我想我当时不明白。在您的沙箱中，叠加层和图像占据相同的空间，因此图像被覆盖。您是否试图让“登录表单”看起来像上面链接图像中的模式？
-
嗨。我已经编辑了我的代码框。我放了一个
<Grid item xs={false} sm={4} md={7} className={classes.image}> <h1>Text Here...</h1> </Grid>。我认为带有不透明度的黑色背景颜色叠加会很好。你怎么看？ -
是的，这通常是覆盖的工作方式。你是说你不想要红色（ish）-绿色渐变叠加？抱歉，我仍然不明白你是在说你目前拥有的东西不起作用，是不是你想要的，还是其他什么。
标签： css reactjs material-ui react-hooks