表单元素本身不支持 background-image，需将背景图加在父容器（如 input-group）上，并设 .form-control 为 transparent 和 border-0；textarea 需处理 resize、background-attachment 和 min-height；移动端 Safari 对 cover 支持差，建议用伪元素或 100% 100%。
表单元素本身不支持 background-image，得靠父容器
Bootstrap 4 的 .form-control 是 <input> 或 <textarea>，原生表单控件无法直接用 CSS background-image 填充（部分浏览器会忽略或覆盖），真正能加背景图的是它的**父级包裹容器**。常见做法是用 <div class="input-group"> 或自定义 <div class="form-group"> 包一层，再给这层设背景。
- 别在
<input class="form-control">上写background-image，大概率失效或被 Bootstrap 默认样式覆盖 - 把背景图加到外层
<div>，再用padding预留出输入框内容空间，避免文字被遮挡 - 若需圆角+背景图，记得给父容器设
border-radius，同时确保.form-control自身border: none且background: transparent
用 input-group 实现带背景图的搜索框
这是最典型的场景：搜索框左侧图标、右侧按钮、中间输入区带纹理/渐变背景。Bootstrap 4 的 .input-group 天然适合做容器封装。
<div class="input-group" style="background: url('bg-pattern.png') center/cover; border-radius: 4px;">
<div class="input-group-prepend">
<span class="input-group-text bg-transparent border-0"><i class="fas fa-search"></i></span>
</div>
<input type="text" class="form-control border-0 bg-transparent px-3 py-2" placeholder="搜索...">
</div>
-
background写在<div class="input-group">上，不是<input> -
.form-control必须加bg-transparent和border-0，否则白色底色和边框会盖住背景 -
px-3 py-2是为了内边距，让文字不贴边；如果背景图有关键细节，需实测调整数值
textarea 背景图要额外处理 resize 和 overflow
<textarea> 默认可拖拽缩放，且内容溢出时滚动条可能遮挡背景图右下角。不处理的话，用户拉大后背景图会错位或被裁切。
- 加
resize: none禁用拖拽，或用resize: vertical限制方向 - 设
background-attachment: local让背景随内容滚动（否则滚动时背景“卡住”） - 若用
background-size: cover，需配合min-height防止初始高度太小导致背景压缩变形 - 示例关键样式：
style="background: url('note-bg.jpg'); background-attachment: local; resize: none; min-height: 120px;"
移动端 Safari 下 background-size: cover 可能失效
iOS 12–14 的 Safari 对表单控件父容器的 background-size: cover 支持不稳定，尤其当容器高度由内容撑开时，背景图常显示为重复平铺或只显示左上角一小块。
- 临时解法：改用
background-size: 100% 100%（拉伸填充，可能失真） - 更稳方案：用伪元素
::before绝对定位实现背景图，父容器设position: relative - 务必在真机上测试，模拟器常表现正常但实际设备出问题
