响应式磨砂玻璃对卡片背景的影响

Question

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

我的想法是使该卡片的背景不可见，然后再将另一张卡片作为该卡片的背景，该卡片将具有以下过滤器：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