html - 页面中间的 div 图像，每侧有 2 个不同的 div

Question

是否可以在页面中间放一张图片？
但是:在图像的右侧和左侧，有 2 个区域可以根据屏幕分辨率增长。
这些区域是“1 像素重复 x”图像。
请注意:左右两张图片不是同一张图片!

在一张带有草图的图片下方(我希望)可以解释我的问题:

Answer 1

你可以像this那样做

在 .container 中设置图像，现在我在其中添加了示例文本。

CSS

.rightArea,
.leftArea {
  position: absolute;
  width: 50%;
  background: yellow;
  top:0;
  left:0;
  height: 100%;
}
.rightArea {
  background: red;
  right: 0;
  left: auto;
}