bootstrap中间图片两边背景

Bootstrap 中间图片两边有背景通常是通过 CSS 的 `background` 属性和一些布局技巧来实现的。你可以使用 `img-responsive` 类将图片设置为响应式，并结合 `container` 或 `row` 等 Bootstrap 容器来控制布局。例如，可以创建一个包含图片的 `.col-centered` 类，它会使图片居中，同时给图片添加两个背景颜色（比如左右两侧各一个）。下面是一个简单的示例：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6 col-centered text-center" style="background-color: lightgray;">
      <!-- 图片 -->
      <img src="your-image-url" alt="图片描述" class="img-fluid img-rounded">
      <!-- 右侧背景（如果需要） -->
      <span class="bg-secondary d-inline-block bg-overlay ml-4"></span>
      <!-- 左侧背景（如果需要） -->
      <span class="bg-secondary d-inline-block bg-overlay mr-4"></span>
    </div>
  </div>
</div>

在这个例子中，`.col-centered` 使用了 Bootstrap 的网格系统 `justify-content-center` 来居中图片，`.img-rounded` 添加圆角效果，而 `.bg-secondary` 和 `.d-inline-block` 则用于设置背景色和内联块级元素。