您现在的位置是：网站首页> 编程资料编程资料

css实现背景虚化效果的示例代码CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2023-10-18 332人已围观

简介这篇文章主要介绍了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编写就可以实现你想要的背景图虚化效果喽！

总结

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

上一篇：浅谈Flex布局与缩放比例计算Flex布局做出自适应页面(语法和案例)详解flex布局中保持内容不超出容器的解决办法flex弹性盒布局最后一行左对齐的实现思路深入浅析CSS3中的Flex布局整理详解CSS中的flex布局css用Flex布局制作简易柱状图的实现flex布局兼容性问题小结详解flex布局的元素如何分配容器的剩余空间flex布局被子元素撑开如何保持内容不超出容器的方法flex布局实现左侧文字溢出省略右侧文字自适应

下一篇：CSS3实现淘宝留白的方法css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢