欢迎来到站长教程网!
兔子CDN

DIV&CSS

当前位置:主页 > 网页制作 > DIV&CSS >

css实现背景虚化效果的示例代码

时间:2020-07-30|栏目:DIV&CSS|点击:

这篇文章主要介绍了css实现背景虚化效果的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

是不是下面的效果,是的话那就继续往下看!



 
代码演示(以上图效果为例)
 
把主要模块写出来,其他详细内容的代码就省略啦
 
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实现背景虚化效果的示例代码的文章就介绍到这了
 

上一篇:CSS3实现淘宝留白的方法

栏    目:DIV&CSS

下一篇:CSS 3.0 结合video视频实现的创意开幕效果

本文标题:css实现背景虚化效果的示例代码

本文地址:www.dtcnnet.com/CSS/220.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号