使用css怎么实现一个背景虚化效果

使用css怎么实现一个背景虚化效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

HTML代码：

<divclass="login-container">
//这个div就是背景图
<divclass="beijing"></div>
//这个div就是显示的内容块，也就是我的logo和登录框
<divclass="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怎么实现一个背景虚化效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。