是不是下面的效果,是的话那就继续往下看!
代码演示(以上图效果为例)
把主要模块写出来,其他详细内容的代码就省略啦
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%;
//利用flex布局让内容content模块垂直居中
display: flex;
justify-content: space-around;
align-items: center;
}
.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: 50%;
height: 50%;
position: absolute;
z-index: 5;
}
按照上面的html和css编写就可以实现你想要的背景图虚化效果喽!试试吧!