如何在反应中显示半透明的div？

Question

我目前正在一个反应​​项目中工作。 单击邮件页面上的任何项目时都会显示项目详细信息页面（与产品和产品详细信息页面相同）。

在该详细信息页面中，当用户未通过身份验证并显示登录按钮时，我想隐藏表单的一部分。

最近我遇到，如果会员不属于订阅计划，中对文章会隐藏内容。

我想在我的项目中实施相同的。 我可以隐藏基于 isAUTH 的内容。

function pageDetail({ auth }){
  return (
      <Actual content >
      { auth && 
       <Form />
      }
      <Login-ui >
   )
}

在这里，我需要从底部隐藏 50%，并在顶部显示不透明度的登录 ui（与上图相同）。

任何建议将不胜感激。 谢谢

Answer 1

您可以创建一个与可见页面高度相同的登录组件，并在该组件中放入线性渐变背景：

background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%); 

然后，您应该阻止滚动其后面的文章，以免向用户显示全文。