Bootstrap 4如何实现表单背景图片填充-Bootstrap教程-PHP中文网

表单元素本身不支持 background-image，需将背景图加在父容器（如 input-group）上，并设 .form-control 为 transparent 和 border-0；textarea 需处理 resize、background-attachment 和 min-height；移动端 safari 对 cover 支持差，建议用伪元素或 100% 100%。

bootstrap 4如何实现表单背景图片填充

表单元素本身不支持 background-image，得靠父容器

Bootstrap 4 的 .form-control 是 <input> 或 <textarea></textarea>，原生表单控件无法直接用 CSS background-image 填充（部分浏览器会忽略或覆盖），真正能加背景图的是它的**父级包裹容器**。常见做法是用 <div class="input-group"> 或自定义 <code><div class="form-group"> 包一层，再给这层设背景。 <ul> <li>别在 <code><input class="form-control"> 上写 background-image，大概率失效或被 Bootstrap 默认样式覆盖

把背景图加到外层 <div>，再用 <code>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"> 上，不是 <code><input>
.form-control 必须加 bg-transparent 和 border-0，否则白色底色和边框会盖住背景
px-3 py-2 是为了内边距，让文字不贴边；如果背景图有关键细节，需实测调整数值

textarea 背景图要额外处理 resize 和 overflow

<textarea></textarea> 默认可拖拽缩放，且内容溢出时滚动条可能遮挡背景图右下角。不处理的话，用户拉大后背景图会错位或被裁切。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

加 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;"