css实现背景虚化效果的示例代码
2020-06-20 11:47
627 查看
是不是下面的效果,是的话那就继续往下看!
代码演示(以上图效果为例)
把主要模块写出来,其他详细内容的代码就省略啦
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 背景虚化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- CSS基于单张背景图实现自适应宽度的圆角菜单效果代码
- 用纯CSS实现镂空效果的示例代码
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
- CSS实现网页背景颜色渐变效果的代码
- css实现文字竖排效果示例代码
- CSS实现3D书本效果的示例代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- Asp.net 2.0 GridView的几个事件(如实现: 行的双击/单击/捕捉键盘按键/鼠标悬浮/移出效果)(示例代码下载)
- 模拟QQ隐藏效果的实现(示例+代码+隐藏类)
- 【转】CSS实现兼容性的渐变背景(gradient)效果
- Jquery+CSS实现的大气漂亮图片切换效果代码
- 用CSS实现竖向圆角效果的折叠菜单代码
- CSS实现背景透明/半透明效果的方法
- JS+CSS实现分类动态选择及移动功能效果代码
- 用JS+CSS实现多种图片漂亮效果的代码
- 分别在XML文件、Java代码中实现动画效果 Animation(带示例)
- css实现背景图片毛玻璃以及渐变色效果
- 微信小程序实现卡片左右滑动效果的示例代码
- css 实现背景透明,子元素不透明的效果