在react js中设置背景并模糊图像背景

Question

我正在尝试设置背景图像和模糊图像背景，没有模糊文本和登录框，所以我不确定这里出了什么问题。请帮助我

return (

/*  <AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }} >
<Router>
<div >
<div className="background">
<div>
<h1 class="Title">welcome</h1>
</div>
{/*  <ul>
<li>
<Link to="/" >Home Page</Link>
</li>
<li>
<Link to="/admin" > Admin Page </Link>
</li>
</ul>
<Route exact path="/" component={Home} />
<Route path="/Login" component={Login} />
<Route path="/Signup" component={Signup} />
<PrivateRoute path="/admin" component={Admin} /> */}
</div>
</div>
{/*  </Router>
</AuthContext.Provider > */}
);
}

css

.background {background-image: url("./img/container.jpg");background-repeat: no-repeat;backgroundsize: 71.5% 100%;background-position: left; position: relative;filter: blur(8px) -webkit-filter: blur(8px);}

Answer 1

您的问题不是很清楚。但我所理解的是，每当你打开登录和文本框时，你都会试图模糊背景图像。如果以上是您的问题，那么，

您可以将z-index设置为背景的CSS文件和登录框的CSS文件。然后，您可以在登录框的按钮上添加onClick事件，这样每当单击登录框的按键时，背景就会切换到模糊状态，登录框就会被渲染。

有关z索引的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index