el+vue 实战 ⑩ el-backtop背景图片自定义、el-link下划线颜色自定义

一、el-backtop自定义按钮背景图片

① 样式设置：这里要给一个width和height，以及将border-radius设置为0，不然会是默认的圆形，background背景需要设置为透明，不然会被默认的白色背景覆盖。

<el-backtop
    :bottom="100"
    :visibility-height="50"
    style="
        width: 57px;
        height: 57px;
        border-radius: 0px;
        background: transparent;
    "
    >
<el-button id="up_btn" class="el-icon-up" @click="handleUp">
</el-button>
</el-backtop>

 ② button样式设置。

handleUp() {
    document.getElementById("up_btn").blur();
},

.el-icon-up {
  background: url("../assets/icon/home/icon_top_nor.png");
  width: 57px;
  height: 57px;
  border: 2px dashed;
  border-radius: 0px;
}
.el-icon-up:hover {
  background: url("~@/assets/icon/home/icon_top_sel.png");
}
.el-icon-up:active {
  border: 3px dashed;
  border-color: rgb(233, 227, 227);
}

③ 效果图

二、el-link下划线颜色自定义

① 样式设置，这里的style设置不能改变下划线的颜色，下划线的颜色还需要额外设置

<el-link
    style="
        font-weight: bold;
        color: #ffffff;
        margin-top: 40px;
        font-size: 13px;
     "
>READ ALL +
</el-link>

② 下划线颜色设置

.el-link.el-link--default:after,
.el-link.el-link--primary.is-underline:hover:after,
.el-link.el-link--primary:after {
  border-color: #fff !important;
}

③ 效果展示