直接设opacity会使表单所有子元素（输入框、按钮、文字）一同变透明而失效；正确做法是用::before伪元素承载背景并控制其opacity，或用background-color: rgba()仅让背景透明。
layui表单本身不提供 background-transparent 这类 API，必须用 CSS 控制，且不能直接对 layui-form 容器设 opacity——否则所有输入框、按钮、文字全变透明。
为什么直接写 opacity: 0 不行
因为 opacity 是继承性属性，设在 layui-form 上会透传到所有子元素：输入框边框消失、placeholder 看不见、按钮背景变淡……最终交互完全失效。这不是“背景透明”，是整块区域失能。
- 真正要的只是「表单容器背景图/色变透明」，内容保持正常可读可点
- 必须把背景和内容分离：用伪元素或额外 wrapper 承载背景，再单独控制其透明度
- 或者改用
background-color: rgba(255,255,255,0)替代transparent，IE11 兼容更稳
安全设置表单背景透明的两种写法
推荐以下任一方式，都不影响内部控件渲染：
- 方案一（推荐）：给
layui-form加一层伪元素承载背景.layui-form::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('bg.jpg'); background-size: cover; opacity: 0.3; z-index: -1; }
然后.layui-form { position: relative; background: none; } - 方案二（轻量）：用
rgba()覆盖背景色.layui-form { background-color: rgba(255,255,255,0.1); }
注意别写成background: rgba(...) !important——可能覆盖掉你已设的background-image
表单内 input / select 怎么保持不透明
只要没主动给子元素设 opacity，它们默认就是 1。但要注意两个隐性干扰点：
- 某些皮肤（如
layui-form-pane）会给.layui-input加background-color: #fff，它会盖住父级半透背景——需手动清空：.layui-input { background-color: transparent; } - 如果用了
layui-form-item的边框样式（border-bottom），它的颜色可能和半透背景混在一起显得脏，建议统一设border-color: rgba(0,0,0,0.1)
移动端表单背景透明后文字看不清？
这是最常被忽略的点：背景变浅 + 文字没重设颜色 = 发灰难辨。Layui 默认文字色是 #333，在浅色半透背景上对比度不足。
- 务必显式指定文字色：
.layui-form { color: #222; } - input placeholder 需单独处理：
.layui-input::-webkit-input-placeholder { color: #999; } - 若底层页面有深色主题（比如暗黑模式），更要加媒体查询校验：
@media (prefers-color-scheme: dark) { .layui-form { color: #eee; } }
真正起作用的从来不是“设个透明”，而是把背景、内容、文字三者拆开控制——表单容器只管背景层，输入框只管交互层，文字只管可读层。漏掉任何一层，都会在某个浏览器或某种数据状态下出问题。
