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>
相关推荐
跟着珅聪学java25 分钟前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
....49232 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
喜陈1 天前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
北极糊的狐2 天前
若依项目通用套路——列表页面提前加载数据塞进下拉框待选项
javascript·vue.js·elementui
lyj1689973 天前
el-select+el-tree实现下拉树形选择
javascript·vue.js·elementui
招风的黑耳4 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
油丶酸萝卜别吃5 天前
springBoot与ElementUI配合上传文件
spring boot·后端·elementui
Jiaberrr5 天前
介绍几种创意登录页(含完整源码)
前端·javascript·css·elementui·css3
零点七九5 天前
sortablejs el-table 树结构拖拽
javascript·vue.js·elementui·sortablejs
兰德里的折磨5505 天前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui