element-ui的 Dialog 对话框背景图片

element-ui的 Dialog 对话框背景图片

效果如图:

代码:

复制代码
!!!注:如果style里有scoped="scoped"会不生效,要单独写个<style></style>
<style>
.bgc {
    /* 弹窗样式 */
    .el-dialog,
    .el-pager li {
        background-color: rgba(255, 0, 0, 0.0);
        color: #FFFFFF;
        background-image: url('../assets/images/dialog1.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    /* 将el-dialog__header、el-dialog__body、el-dialog__footer背景设置为透明 */
    .el-dialog__header {
        padding-top: 10px !important;
        background-color: rgb(255, 255, 255, 0);
        border-radius: 14px 14px 0 0;
    }

    .el-dialog__body {
        border-top: 0 !important;
        background-color: rgba(19, 31, 59, 0);
        color: #FFFFFF;
    }

    .el-dialog__footer {
        text-align: center;
        background-color: rgba(255, 255, 255, 0);
    }
}
</style>
相关推荐
Jeffrey__Lin1 天前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
Miketutu1 天前
vxe-table编辑模式适配el-date-picker
javascript·vue.js·elementui
533_1 天前
[element-plus] el-tree 父节点展开后,子节点有白背景色的bug
elementui
爱生活的苏苏1 天前
elementUI 表单验证-联动型校验
前端·javascript·elementui
硅谷工具人3 天前
基于element-plus封装table组件
elementui·el-table封装
咚咚咚小柒3 天前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Stringzhua3 天前
ElementUi【饿了么ui】
前端·ui·elementui
尔嵘3 天前
vue2+elementUi实现自定义表格框选复制粘贴
前端·javascript·elementui
星光一影3 天前
HIS系统天花板,十大核心模块,门诊/住院/医保全流程打通,医院数字化转型首选
java·spring boot·后端·sql·elementui·html·scss
博客zhu虎康4 天前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui