最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css如何实现背景虚化效果 css实现背景虚化效果代码实例
时间:2022-06-25 14:05:28 编辑:袖梨 来源:一聚教程网
css如何实现背景虚化效果?本篇文章小编给大家分享一下css实现背景虚化效果代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
代码演示(以上图效果为例)
把主要模块写出来,其他详细内容的代码就省略啦
HTML代码:
//这个div就是背景图 //这个div就是显示的内容块,也就是我的logo和登录框
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编写就可以实现你想要的背景图虚化效果喽!
相关文章
- 原神白术培养材料全收集攻略 原神白术培养材料在哪获取 04-29
- 暗区突围代理人版本上线开服公告 暗区突围S8赛季更新内容介绍 04-29
- 明日方舟五周年公开招募系统更新内容一览 明日方舟五周年公开招募系统更新了什么 04-29
- 原神仆人阵容配队分享 原神仆人阿蕾奇诺怎么配队 04-29
- 《原神》请转告王城的公民成就攻略 04-29
- 崩坏星穹铁道2.1第二期虚构叙事怎么配队 04-29