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>
相关推荐
宝拉不想努力了1 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
Dnn0113 小时前
修改el-select背景颜色
css·elementui·vue3
Aotman_2 天前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6
serve the people2 天前
vue中将elementUI和echarts转成pdf文件
vue.js·elementui·echarts
tryCbest3 天前
Vue2集成ElementUI实现左侧菜单导航
前端·javascript·elementui
化作繁星5 天前
elementUI中MessageBox.confirm()默认不聚焦问题处理
前端·javascript·elementui
沉默是金~5 天前
Vue+Notification 自定义消息通知组件 支持数据分页 实时更新
javascript·vue.js·elementui
谁点的猪脚饭7 天前
vue2 element-ui 中 el-radio 单选框点击事件失效问题
vue.js·elementui·vue2
BillKu8 天前
Vue3父子组件数据双向绑定示例
javascript·vue.js·elementui
BillKu8 天前
遵守 Vue3 的单向数据流原则:父组件传递对象 + 子组件修改对象属性,安全地实现父子组件之间复杂对象的双向绑定示例代码及讲解
javascript·vue.js·elementui