用css如何做背景虚化的效果？方法是什么？

　　本文给大家分享用css做背景虚化的效果的内容，实现效果如下，小编觉得比较实用，大家在做网页设计背景的时候可以参考使用，下面我们就来看看具体的实现背景虚化方法是什么吧。
 
 
 
　　代码演示（以上图效果为例）
 
　　把主要模块写出来，其他详细内容的代码就省略啦
 
　　HTML代码：
 
　　 <div class="login-container">
　　     //这个div就是背景图
　　     <div class="beijing"></div>
　　     //这个div就是显示的内容块，也就是我的logo和登录框
　　     <div class="content"></div>
　　  </div>
　　CSS代码：
 
　　 .login-container{
　　    position: relative;
　　    width: 100%;
　　    height:100%;
　　    position: relative;
　　    //利用flex布局让内容content模块垂直居中
　　    display: flex;
　　    flex-direction: column;
　　    position: relative;
　　  }
　　 .beijing{  //背景图样式
　　    width: 100%;
　　    height: 100%;
　　    position: absolute;
　　    left: 0px;
　　    top:0px;
　　    background: url('../../../static/img/timg (1).jpg');
　　    background-repeat: no-repeat;
　　    background-size: cover;
　　    -webkit-filter: blur(10px);
　　    -moz-filter: blur(10px);
　　    -o-filter: blur(10px);
　　    -ms-filter: blur(10px);
　　    filter: blur(10px);
　　  }
　　.content{  //内容图样式
　　 width: 80%;
　　 height: 70%;
　　 position: absolute;
　　 z-index: 5;
　　}
　　按照上面的html和css编写就可以实现你想要的背景图虚化效果喽！