vue-element-admin 初始是纯色背景,下面添加一张自己选的背景图片。
0. 效果图
初始效果:
更改背景后效果:
1. 操作步骤
1.1 准备图片
准备一张想要用作背景的图片,放在下面路径
vue-element-admin-master\src\assets\login_images\login_bg.jpg
1.2 更改代码
打开下面路径的 index.vue 文件
vue-element-admin-master\src\views\login\index.vue
对 .login-container 代码块内代码做如下图所示修改(代码在图片下面)。
首先将下面代码注释掉
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden;
然后在下面添加以下代码
width: 100%;
height: 100%;
background-image: url("../../assets/login_images/login_bg.jpg");
background-size: cover;
background-position: center;
position: relative;
2. 保存并运行代码
保存代码后,在终端中输入
npm run dev
然后在浏览器中输入以下链接即可预览效果
http://localhost:9527