登录背景图样式

HTML部分：

<div class="login-container">
    <el-form>
    	登录
    </el-form>
</div>

css完整部分：

.login-container {
  height:100%;
  background: url("../assets/login_bg.jpg") no-repeat center fixed;
  background-size: cover;
  -webkit-background-size: cover;//兼容Webkit内核浏览器如Chrome和Safari
  -o-background-size: cover;//兼容Opera
}

效果展示

此方式会保证浏览器缩放时候背景图片不会缩放

分析

background-size:cover 会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 可能会使一部分区域不显示，但可以保证不出现白边框

踩坑记录

• background-size 要放到background样式后面，否则不起作用