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>
相关推荐
wangbing112514 小时前
界面规范11-对话框
javascript·vue.js·elementui
Hexene...2 天前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
fury_1234 天前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui
小菜全4 天前
ElementUI 组件概览
前端·vue.js·elementui
今天不要写bug4 天前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
前端 贾公子5 天前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐5 天前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
赵得C5 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
小菜全5 天前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
浩星5 天前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui