css实现背景虚化

野性酷女 2023-02-14 15:50 8阅读 0赞

是不是下面的效果，是的话那就继续往下看！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]

### 代码演示（以上图效果为例） ###

把主要模块写出来，其他详细内容的代码就省略啦

##### 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编写就可以实现你想要的背景图虚化效果喽！试试吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200605182220407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0,size_16,color_FFFFFF,t_70#pic_center