宜宾网站建设公司

使用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怎么实现一个背景虚化效果
文章网址：http://ybzwz.com/article/ihjgig.html

其他资讯