css实现背景虚化效果的示例代码
(编辑:jimmy 日期: 2024/12/28 浏览:3 次 )
是不是下面的效果,是的话那就继续往下看!
代码演示(以上图效果为例)
把主要模块写出来,其他详细内容的代码就省略啦
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编写就可以实现你想要的背景图虚化效果喽!
总结
下一篇:浅谈Flex布局与缩放比例计算