怎样做出这个模糊的背景效果

Question

怎样做出这个模糊背景效果 我下面这样写 效果很差

<view class="index">
    <view class="content">
    </view>
</view>

.index{
  width: 750rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(http://aigou-file.obs.cn-south-1.myhuaweicloud.com/images/15/2021/01/ntyvPvaAAjgpGgGT6pPJmMMjgyI0pJ.png);
  background-size:contain;
  background-position: center;
  justify-content: center;
  align-items: center;
}
.content{
  width: 550rpx;
  height: 480rpx;
  background: rgba(155, 144, 144, 0.8);
  filter:(2px);
  border-radius: 10rpx;
}

下面是我做出来的实际效果

Answer 1

{
    background: transparent;
    backdrop-filter: blur(2px);  /* 适度调整 */
}