如何制作半图像半纯色分割式背景？求专业指导

以下是几种实用的实现方案，可结合Bootstrap或原生CSS完成，解决你之前遇到的背景制作问题：

方案一：CSS背景属性直接组合（极简场景） #

适合仅需要背景分割、不需要在两侧单独放置内容的情况，可直接复用Bootstrap容器类：

<div class="container-fluid split-bg">
  <!-- 内部内容 -->
</div>

.split-bg {
  min-height: 100vh; /* 占满整个视口高度 */
  /* 左侧纯色，右侧背景图（宽度50%，高度100%） */
  background: #2c3e50 url('你的图片路径') right/50% 100% no-repeat;
}

• 若要左侧显示图片、右侧纯色，将right改为left即可
• 可通过调整50%数值改变分割比例，比如40%让图片侧占40%宽度

方案二：Bootstrap Grid布局（带内容场景） #

适合需要在纯色侧和图片侧分别添加文字、按钮等内容的场景，利用Bootstrap的栅格系统拆分容器：

<div class="container-fluid">
  <div class="row h-100">
    <!-- 纯色侧列 -->
    <div class="col-6 bg-dark text-white d-flex align-items-center justify-content-center">
      <div>
        <h2>纯色区域标题</h2>
        <p>这里可以放文字、按钮等内容</p>
      </div>
    </div>
    <!-- 图片侧列 -->
    <div class="col-6 bg-img-area d-flex align-items-center justify-content-center">
      <div class="text-white">
        <h2>图片区域标题</h2>
        <p>图片上的内容会自动居中</p>
      </div>
    </div>
  </div>
</div>

/* 确保行高占满视口 */
.row.h-100 {
  min-height: 100vh;
}
/* 设置图片侧背景 */
.bg-img-area {
  background: url('你的图片路径') center/cover no-repeat;
  /* 可选：添加半透明遮罩，提升文字可读性 */
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('你的图片路径') center/cover no-repeat;
}

• 移动端可通过媒体查询改为上下分割：

@media (max-width: 768px) {
  .col-6 {
    width: 100%;
    min-height: 50vh;
  }
}

方案三：伪元素实现（无额外DOM结构） #

适合不想新增多余HTML标签的场景，通过容器的伪元素生成图片侧背景：

<div class="container-fluid split-bg-pseudo">
  <!-- 内部内容自动显示在纯色侧，若要覆盖全容器需调整z-index -->
  <div class="content text-white p-5">
    <h2>页面内容</h2>
  </div>
</div>

.split-bg-pseudo {
  min-height: 100vh;
  background-color: #2c3e50;
  position: relative;
  overflow: hidden;
}
.split-bg-pseudo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: url('你的图片路径') center/cover no-repeat;
  z-index: 0; /* 确保内容在伪元素上方 */
}
.split-bg-pseudo .content {
  position: relative;
  z-index: 1;
}

注意事项 #

1. 图片路径需正确，可使用本地相对路径或可靠的CDN地址
2. 若使用Bootstrap的h-100类，需提前给html, body设置height: 100%;以确保高度继承
3. 可根据需求调整分割比例、背景色、图片显示方式（如contain替代cover）

内容的提问来源于stack exchange，提问作者ammar Ahmad