Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

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

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
{
    background: transparent;
    backdrop-filter: blur(2px);  /* 适度调整 */
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...