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

关于使用css怎么实现一个背景虚化效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。