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>
相关推荐
_Legend_King3 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
J总裁的小芒果4 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
ZwaterZ16 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六16 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保16 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~16 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
大霞上仙17 小时前
element ui table 每行不同状态
vue.js·ui·elementui
lv程序媛18 小时前
el-table表头前几列固定,后面几列根据接口返回的值不同展示不同
javascript·vue.js·elementui
白臻2 天前
使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题
前端·vue.js·elementui
吃葡萄不吐葡萄皮嘻嘻2 天前
el-table实现最后一行合计功能并合并指定单元格
前端·vue.js·elementui