是不是下面的效果，是的话那就继续往下看！

代码演示（以上图效果为例）

把主要模块写出来，其他详细内容的代码就省略啦

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编写就可以实现你想要的背景图虚化效果喽！

总结

到此这篇关于css实现背景虚化效果的示例代码的文章就介绍到这了,更多相关css 背景虚化内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！