时间戳

首页 > 解决方案 > 如何在反应中显示半透明的div？

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

问题描述

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

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

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

在此处输入图像描述

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

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

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

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

标签： htmlcssreactjs

解决方案

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

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

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

推荐阅读