能否用CSS实现单容器内背景色与背景图并排布局？

完全可以实现！利用CSS的多重背景特性，就能在单个outerWrapper容器里同时实现纯色背景与背景图的相邻排列，还能满足背景图自适应窗口缩放、子容器覆盖整个区域的需求，具体代码如下：

HTML结构 #

<div class="outerWrapper">
     <div class="innerWrapper"></div>
</div>

CSS代码 #

.outerWrapper {
  /* 设为相对定位，让子容器的绝对定位基于它 */
  position: relative;
  width: 100%;
  /* 高度根据需求设置，这里用100vh占满整个视口高度 */
  min-height: 100vh;
  /* 多重背景配置：左边纯色，右边背景图 */
  background: 
    #f0f0f0 /* 替换成你需要的背景色 */,
    url('你的背景图地址') right / auto 100% no-repeat;
  /* right：背景图靠右侧排列；auto 100%：宽度随窗口自适应、高度占满容器；no-repeat：防止背景图重复 */
  /* 如果要让背景图占固定比例宽度，比如50%，可以把auto改成50%，这样背景图和纯色各占一半宽度 */
}

.innerWrapper {
  /* 绝对定位，完全覆盖外层容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里可以添加你需要的样式，比如半透明遮罩、内容布局等 */
}

核心要点 #

• 多重背景是关键：通过CSS的background属性可以同时设置纯色和背景图，用位置和尺寸参数控制两者的排列方式，窗口缩放时背景图会自动适配容器大小。
• 外层容器的相对定位是基础：确保innerWrapper能通过绝对定位完全覆盖整个区域，不会超出容器范围。
• 灵活调整比例：如果需要固定背景图的宽度占比，直接修改背景图的尺寸参数即可，比如50% 100%就能让背景图占容器一半宽度，适配各种布局需求。

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