【vue界面设计背景以及表单透明样式的灵活运用】

        原先因为登录界面的表单和背景有些过于单调，于是就去搜索了相关的样式，具体参考的博客文档为以下：

(24条消息) HTML+CSS 实现一个简单的登录页面 （背景图片完全适应 不失帧）_用html和css做一个背景图和登录界面_生于忧患，死于安乐2017的博客-CSDN博客

还有更好看的，如以下的博客文档：

超炫酷html+css+javascript实现登录页面模板 - 知乎 (zhihu.com)

对于表单透明样式的设计主要如下：

总的是来说就两点：

一、将表单添加进<div></div>标签中，然后给<div>标签设置一个id值或class值，便于在css样式中使用相关的样式设计。如下代码：

<template>
<!-- 主要就是这一样式，可以采用id，也可以采用class，class和id的样式使用方法这里就不再详细描述了 -->
  <div class="wrapper">
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container login_form">
    <h3 class="title">系统登录</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:47%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
    <el-button type="success" style="width:47%;" @click.native.prevent="goRegister">店铺入驻</el-button>
    <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
    </el-form-item>
  </el-form>
  </div>
</template>

具体可以上面代码的这几个：

<div class="wrapper">

<el-form class="demo-ruleForm login-container login_form">

二、将css样式添加在末尾：

全部样式设计代码：

<style lang="scss" scoped>
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/

  /*  width: 100%;
      height: 100%;
      background-image: url("../../assets/login_images/login_bg.jpg");
      background-size: cover;
      background-position: center;
      position: relative;*/

  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}
.wrapper {
  /*渐变的背景色*/
  /*height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);
  overflow: hidden;*/
  /*背景图*/
  background: url("../assets/bg1.jpg") no-repeat center center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login_form{
  border:1px solid  transparent;
  border-radius: 15px;
  padding-right: 30px;
  /* 为其整体设置接近透明的效果*/
  background-color: rgba(255,255,255,0.6);
  /* 设置box-shadow使其有立体感 */
  box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);
  position: relative;
  left: -15px;
}
.el-form-item{
  /* 给el-form组件的label标签颜色修改 */
  color: #FFFFFF;
}

.el-input{
  /* 使input框的背景变透明 */
  background-color: transparent;
  /* 使边框也变透明 */
  border-color: transparent;
  /* 给边框加阴影能够使其有立体感 */
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
  /* 改变获取焦点后的竖线颜色 */
  caret-color: rgba(0, 255, 255,0.8);
  color:#FFFFFF;
}

.el-input:hover{
  border-color: rgb(0, 255, 255);
}

.el-input:focus{
  border-color: aqua;
}
.el-button{
  opacity: 0.8;
  /* 使边框也变透明 */
  border-color: transparent;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}
</style>

其中上面所示的css代码中主要的几块是：

1.背景图片样式代码：

<style>
.wrapper {
  /*渐变的背景色*/
  /*height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);
  overflow: hidden;*/
  /*背景图*/
  background: url("../assets/bg1.jpg") no-repeat center center;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>

其中的url("这里是你图片的路径或图片的url地址")

2.表单的整体透明设计：

<style>
.login_form{
  border:1px solid  transparent;
  border-radius: 15px;
  padding-right: 30px;
  /* 为其整体设置接近透明的效果*/
  background-color: rgba(255,255,255,0.6);
  /* 设置box-shadow使其有立体感 */
  box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);
  position: relative;
  left: -15px;
}
</style>

设置透明度可以更改background-color: rgba(255,255,255,0.6);中的0.6，是透明度的百分比，这0.6表示的是百分之六十的透明度；box-shadow: 5px 5px 0 0  rgba(0,0,0,0.2);是设计表单这个box的立体感，也是更改后面那个0.2来改变，主要是以百分比形式的，前面的三个数都是表单背景颜色的设置，也就是三原色rgb。

3.对表单中的input框进行透明处理：

<style>
.el-input{
  /* 使input框的背景变透明 */
  background-color: transparent;
  /* 使边框也变透明 */
  border-color: transparent;
  /* 给边框加阴影能够使其有立体感 */
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
  /* 改变获取焦点后的竖线颜色 */
  caret-color: rgba(0, 255, 255,0.8);
  color:#FFFFFF;
}

.el-input:hover{
  border-color: rgb(0, 255, 255);
}

.el-input:focus{
  border-color: aqua;
}
</style>

这里面的.el-input是主要对input框的一个设置，具体都写在注释里面，而：后的hover和focus都是对input框的边界设置的颜色，可以不用，这里加上就点击input框的时候会发现input边框的边界变成你设置的颜色。

4.对表单按钮的透明设置：

<style>
.el-button{
  opacity: 0.8;
  /* 使边框也变透明 */
  border-color: transparent;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}
</style>

这里的opacity:0.8是设置按钮的不透明度，因为前面我的按钮是

<el-button type="primary">登录</el-button>
    <el-button type="success">店铺入驻</el-button>

加了type的分别是蓝色按钮和绿色按钮，所以如果直接设置透明的话就只设置border-color: transparent（这个属性是设置按钮边框为透明的）的话就会让按钮的颜色消失，所以加了一个不透明度设置，box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);是设置按钮的立体感，其实就是对阴影深度的设置。

最后，这里附上最终的效果图，我背景用的是原神图，懂的都懂，不装了，我是原！！！！