javascript - 卡片背景上的响应式磨砂玻璃效果

Question

我正在尝试将这张卡片的背景设为磨砂玻璃而不是白色。根据我的谷歌搜索，这不是一件容易或直接的事情。使卡片背景具有磨砂玻璃效果的最佳方法是什么，以便整个事物仍然对 vh 和 vw 变化保持响应？我正在使用 antd ui 框架在 ReactJS 中实现它。

我的一个想法是让这张卡片的背景不可见，然后用另一张卡片作为这张卡片的背景，它会有 filter: blur() css 属性，但我无法调整尺寸，我还没有想出如何将一张卡片堆叠在另一张卡片上。

到目前为止，这是我的代码:

<div className="Login">
  <Row>
    <Col xs={{ span: 0 }} sm={{ span: 2 }} md={{ span: 6 }} lg={{ span: 8 }} xl={{ span: 9 }}></Col>
    <Col sm={{ span: 20 }} md={{ span: 12 }} lg={{ span: 8 }} xl={{ span: 6 }}>
      <Card
      title={<span className='title'><Avatar  size='large' shape='square' style={{ marginRight: '5px' }}/>title</span>}
      bordered={false}
      tabList={tabList}
      onTabChange={(key) => { this.onTabChange(key, 'key'); }}
      style={{ marginTop: '17vh' }}
      >
        {contentList[this.state.key]}  
      </Card>
    </Col>
    <Col sm={{ span: 2 }} md={{ span: 6 }} lg={{ span: 8 }} xl={{ span: 9 }}></Col>
  </Row>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

您正在寻找名为 background-clip 的 CSS 属性。

查看下面链接中的演示，看看这个小背景是如何半透明的。

https://codepen.io/team/css-tricks/pen/0733d9cb92ca4213466922d2ebc775a7