资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用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;
}

关于使用css怎么实现一个背景虚化效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


网站名称:使用css怎么实现一个背景虚化效果-创新互联
URL地址:http://www.cdkjz.cn/article/dioigc.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220