Question

最简单的描述方法是在这里引用我的小提琴：

编辑：有错误的小提琴链接，这是正确的：

这是我的CSS：

.dynamic {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  height: 200px;
  width: 100%;
}
.dynamic img{
  margin: -2px;
}

.repeat {
  position: relative;
  background-repeat: repeat;
  background: url("http://placehold.it/100x100");
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-top: 30px;
}

我希望有一个动态的小图像列表来覆盖固定高度区域内的视口，该区域从一侧到另一侧覆盖整个浏览器窗口。问题是图像不会显示，直到它们有完全需要的空间，在我的例子中是100px。

如果我拍摄一张图像并重复拍摄，它会显示尽可能多的图像，从一侧到另一侧覆盖整个屏幕，这就是我想要完成的。

如果我能澄清，请告诉我。

有什么想法吗？

Answer 1

超大包装

在.dynamic内添加一个宽度为两倍的包装器。这样，图像就在一个宽度足够大的元素中。 overflow:hidden上的.dynamic可防止额外宽度触发水平滚动条。

Updated demo

<强> CSS

.dynamic {
    width: 100%;
    overflow: hidden;
}
.dynamic .wrapper {
    width: 200%;
}

<强> HTML

<div class="dynamic">
    <div class="wrapper">
        ...
    </div>
</div>

使多个图像覆盖整个视口，如css repeat

1 个答案:

超大包装