css设置背景虚化，vue移动端登录页

先看结果：

1、需要设置两个并列的div，第一个div代表背景部分，第二个div表示内容主体。如下：

代码如下；

<template>
  <div style="height: 100%; width: 100%">
    <div class="bg-blur"></div>
    <div class="login_info">
      <h3>欢迎登录</h3>
      <x-input class="login_item" title="用户名" v-model="username" type="text"></x-input>
      <x-input class="login_item" title="密 码" v-model="password" type="password"></x-input>
      <x-button class="btn" @click.native="submitUser">登录</x-button>
    </div>
  </div>

</template>

2、两个div的css样式如下：

代码如下：

.bg-blur {
   background: url('../assets/img/hb2.jpg');
   height: 100%;
   width: 100%;
   float: left;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   filter: blur(19px);
}
  .login_info {
    /*width: 100%;*/
    margin-left: 50%;
    transform: translateX(-50%);
    /*text-align: center;*/
    position: absolute;
    top: 25%;
    /*width: 100%;*/
    color: rgba(255, 255, 255, 0.7);
    /*font-size: 36px;*/
  
  }

以上就可以完成背景虚化啦~

具体子标签的位置需要再设置下