一、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;
}
③ 效果展示