layui弹窗iframe背景变黑是因容器或子页body缺失透明声明，需在全局CSS加.layui-layer-content{background:transparent!important}，子页HTML中设html,body{background:transparent!important}，并给iframe添加background:transparent及-webkit-backface-visibility:hidden等样式。
layui弹窗中iframe子页面在部分浏览器（如Chrome 90+、Edge 105+、Safari 16+）出现背景变黑，本质是iframe容器或子页body缺失透明声明，导致渲染引擎默认填充黑色背景，尤其在深色模式或硬件加速开启时高频触发。
确认是否为iframe容器背景色问题
打开浏览器开发者工具，选中弹窗内iframe元素，检查其父容器.layui-layer-content是否设置了background-color或background。若存在内联style="background:#000"或CSS规则命中，直接覆盖即可。
在全局CSS末尾添加：.layui-layer-content { background: transparent !important; }
【必须加!important】：Layui 2.8+ 会动态写入内联background样式，不加权重无法覆盖。
修复iframe子页面自身背景
子页面HTML的
标签必须显式声明背景透明，否则现代浏览器在合成层中可能回退为纯黑。在iframe加载的页面头部
中加入：
若子页使用Layui布局，检查是否引入了layui-layout-body类——它自带background: #1a1a1a，必须手动重置：.layui-layout-body { background: transparent !important; }
强制启用透明合成层（关键补救）
方法一：给iframe标签加style="background: transparent; -webkit-backface-visibility: hidden;"
方法二：在layer.open()调用时，通过content传入带样式的iframe字符串：
content: ''
方法三：在success回调中动态注入样式：
success: function(layero, index) {
const iframe = layero.find('iframe').get(0);
if (iframe) {
iframe.style.background = 'transparent';
iframe.style.webkitBackfaceVisibility = 'hidden';
}
}
