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

Question

我试图让这张卡片的背景为磨砂玻璃而不是白色。从我的谷歌搜索来看，这不是一件容易或直接的事情。什么是最好的方法，我可以使卡背景成为一个磨砂玻璃效果，以便整个事情仍然保持对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