怎样做出这个模糊的背景效果_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

<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;
}

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

###

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

###

可以叠两层背景图.

content设置同样的背景图,通过background-position定位使之与底部的背景图重叠.

html

<body class="center-box">
<div class="content">
  <div class="box"></div>
</div>
</body>

样式

  html,body{
      height: 100%;
      margin: 0;
    }

    body{
      background-image: url("./10.jpg");
      background-size: 900px 383px;
    }

    .center-box{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content{
      width: 280px;
      height:280px;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }

    .box{
      transform: translate(-10px, -10px);
      background-image: url("./10.jpg");
      background-color: rgba(155, 144, 144, 0.8);;
      background-size: 900px 383px;
      background-position: calc(calc(300px - 900px) / 2) calc(calc(300px - 383px) / 2);
      width: 300px;
      height: 300px;
      filter: blur(5px);
    }

###

filter: blur(10px);