小编cop*_*lit的帖子

我正在尝试使用overflow-x:scroll&white-space:nowrap创建一个带有(平铺)背景图像的水平滚动窗格.该窗格跨越任意数量的元素.

CSS:

.frame {
   overflow-x: scroll;
}

.pane {
   background-image: url(free-tile-floor-texture.jpg);
   background-repeat: repeat;
   white-space: nowrap;
}

.item {
   display: inline-block;
   width: 150px;
   height: 50px;
   background-color: grey;
}

HTML:

<div class="frame">
   <div class="pane">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

小提琴演示

我希望背景图块自动跨越窗格的整个宽度,包括其所有项目元素.目前它只填充框架宽度.罪魁祸首似乎是窗格宽度属性 - 它不会调整窗格内容的总宽度.

Ofc,它通过手动调整width属性来工作,但我需要它动态调整.

如何获取窗格的背景图像以填充窗格的全宽？还有另一种方法可以达到同样的效果吗？