CSS如何实现容器双背景图层按指定区域尺寸定位

该需求完全可以仅靠CSS实现，你原有代码不生效的核心原因是对background-position的百分比定位逻辑存在误解：两值语法下的百分比定位规则不是「把图片左上角放在容器对应百分比坐标处」，而是「把图片自身对应百分比位置的点，和容器对应百分比位置的点对齐」。
你原有代码给第二张图设置background-position: 50% 0，实际效果是把第二张图水平方向的中点对齐容器水平中线，第二张图宽度是容器的50%，最终它只会覆盖容器25%_{75%宽度的区域，和预期的50%}100%宽度区域不符。 #

不需要额外嵌套HTML标签或者写JS，调整背景定位规则即可，最简洁的写法如下：

#wrapper {
  width: 100%;
  background-image: url(/img1.jpg), url(/img2.jpg);
  background-repeat: no-repeat, no-repeat;
  /* 左图靠左上角对齐，右图靠右上角对齐 */
  background-position: left top, right top;
  /* 尺寸保持你原本的设置即可 */
  background-size: 50% 90%, 50% 70%;
}

逻辑说明 #

• 左侧第一张图：靠左上角对齐，宽度占容器50%、高度占容器90%，刚好覆盖容器左上到中线、高度90%的区域，符合要求。
• 右侧第二张图：靠右上角对齐，宽度占容器50%，它的左边缘会自然落在容器50%宽度的位置，高度占容器70%顶对齐，刚好覆盖容器中线到右上角、高度70%的区域，完全匹配需求。
• 注意：background-image中先写的图片层级更高，会覆盖在后写的图片上方，如果需要调整层叠顺序调换两个url的位置即可。
• 容器随窗口宽度自适应时，背景的尺寸、位置会自动同步计算，不需要额外处理。由于你使用的是可拉伸的纯色jpg，不会有变形导致的显示问题。

如果你需要更直观的偏移控制，也可以用四值定位语法明确指定偏移距离，效果和上面的写法完全一致：

#wrapper {
  width: 100%;
  background-image: url(/img1.jpg), url(/img2.jpg);
  background-repeat: no-repeat, no-repeat;
  /* 左图：距离容器左边缘0、顶边缘0；右图：距离容器左边缘50%、顶边缘0 */
  background-position: left 0 top 0, left 50% top 0;
  background-size: 50% 90%, 50% 70%;
}

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