Question

我有一个侧面抽屉/模版，当单击我的应用程序的图像时，它将滑入视图。我试图使侧面抽屉后面的所有内容模糊不清，我意识到我可能需要另一个像Backdrop这样的组件来吸收页面的全部内容，并以某种方式模糊整个侧面时的整个div。 -抽屉显示。

我尝试使用backdrop-filter，但Chrome尚不支持。还有其他选择吗？还是我需要透明的“虚拟”图像来模糊？

我的组件就是这样：

import React from 'react';
import styles from './styles.module.css';

const backdrop = props => (
  <div className={styles.backdrop} onClick={props.click}></div>
)

export default backdrop;

我尝试过：

.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: blur(2px);
  z-index: 300;
}

然后将其安装在我的应用上：

class App extends Component {
  componentDidMount() {
    const { loadUserAction } = this.props;
    const {
      auth: { token }
    } = readLocalStorage();
    if (token) loadUserAction(token);
  }

  render() {
    return (
      <BrowserRouter>
        <Route exact path={signInPath} component={Login} />
        <Backdrop />
        <SideDrawer />
        <ProtectedRoute exact path={feedPath} component={MovieFeed} />
      </BrowserRouter>
    );
  }
}

显示Modal时，是否模糊div中的内容？

0 个答案: