时间戳

首页 > 解决方案 > 如何在一个组件上的一个组件上设置背景不可见

javascript - 如何在一个组件上的一个组件上设置背景不可见

问题描述

在 React 中单击按钮，我使一个小组件 (compSmall) 在另一个大组件 (compBig) 的顶部可见。在 compSmall 上使用 css 属性，例如

 position: absolute;
 width: 300px;
 height: 150px;
 margin-left: 40%;
 margin-top: 200px;
 border: 1px solid #0083a5;
 z-index: 100;

但是当 compSmall 在 compBig 上可见时，背景（表示 compBig 的内容）仍然可见。但我希望 compBig 的内容在 compSmall 可见时不清晰或模糊。

如何实现这一点。
PS：我只能在 compSmall 上应用属性，不能在 CompBig 上应用属性。因为 CompBig 是除了 compSmall 之外的整个应用程序组件。

标签： javascripthtmlcssreactjsfrontend

解决方案

使用与 compBig 相同大小的 compSmall 怎么样，这样您就不会看到 compBig 并且在 compSmall 内您可以创建另一个组件或只是具有这些 css 属性的 div。

JSX

<CompBig>
 <CompSmall className="compSmall">
  <div className="content"></div>
 </CompSmall>
</CompBig>

CSS

.content {
 position: absolute;
 width: 300px;
 height: 150px;
 margin-left: 40%;
 margin-top: 200px;
 border: 1px solid #0083a5;
 z-index: 100;
}

.compSmall {
   /* Add the blur effect */
  filter: blur(8px);
  height: 100%;
  width: 100%
}

推荐阅读