要将Layui的layer.load加载层背景改为深色,需覆盖layui-layer-loading的background样式,用纯黑或半透深色+白色SVG图标替代默认base64背景,并确保CSS在layui.css后加载;shade参数仅控制遮罩层,不影响loading自身背景。

想让Layui的layer.load加载层遮罩从默认的浅灰白色变成深色背景,必须覆盖其底层CSS中已编译的base64背景图,因为layer.load不接受opacity或background-color直接配置。
直接覆盖layui-layer-loading的background样式
第一步:在页面HTML的
内或全局CSS文件末尾添加如下样式(确保它在layui.css之后加载):.layui-layer-loading { background: #000000 url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23fff' stroke-width='8' stroke-dasharray='251.2' stroke-dashoffset='0'/%3E%3C/svg%3E") no-repeat center !important; }
这行代码用纯黑#000000替换了原base64白底,并保留白色旋转环。若需半透深色,可改用background: rgba(0,0,0,0.7)配合SVG图标,但必须同时指定url(...)路径——否则图标会消失。
第二步:确认layer CSS已加载完成再注入该样式。若用JS动态插入,务必等layui.use('layer', callback)执行完毕后再操作,否则样式会被layui.css重置。
通过layer.load参数传入shade颜色(仅影响遮罩层,不影响loading图标背景)
方法一:调用layer.load时显式设置shade数组
layer.load(2, { shade: [0.6, '#1a1a2e'] });
注意:这个shade控制的是浮在loading层之上的**独立遮罩层**,不是loading自身背景。它会让整个页面变暗,但中间那个带图标的圆圈区域仍是默认白底。适用于需要强化视觉聚焦的场景。
方法二:组合使用shade + 自定义loading DOM结构
先关闭默认loading背景:layer.load(2, { shade: [0.6, '#1a1a2e'], content: '' }); → 然后在success回调里手动插入深色SVG图标并居中定位。
彻底替换loading图标的base64编码(高阶可控方案)
第一步:准备一个深色背景+亮色图标的SVG,转为URL编码(例如用https://yoksel.github.io/url-encoder/)
第二步:将编码后字符串填入background的url()中,替换原base64部分
第三步:必须同步修改background-size和background-position,否则图标会偏移或拉伸。原始尺寸是100×100,推荐保持一致。
【关键前提】 此操作前必须确认项目未启用Layui 2.8+的CSS变量构建流程——否则自定义base64可能被主题包覆盖,需配合禁用默认主题CSS并引入定制版CSS文件。











