需要多个 "background-size: cover;"？

Question

我正在尝试构建一个有趣的项目，我想创建一个在您向下滚动时包含多个图像的页面。我正在使用 HTML 和 CSS.

我希望布局与 background-size: cover; 类似，但显然每页只能使用 1 个？

这是我正在尝试实现的具有类似布局的网站 sample website 减去所有转换。我只是想实现这个网站的图像布局。

我不知道如何调整我的图像大小以使其与封面布局相似，但我希望页面能够向下滚动，而不是一个堆叠在另一个之上。

我试过使用background-image: url("sample.jpg"), url("sample2.jpg"); 但他们将图像堆叠在一起，而不是使页面可滚动。

我也尝试过使用多个 div，每个 div 都有自己的 background-size: cover; 但是只有第一张照片出现了？

我想要一个充满“封面”图片的垂直滚动页面，如果这有意义的话？我不知道还能怎么解释，我花了几个小时在谷歌上搜索，但我找不到任何东西？

我对网络开发还是很陌生，所以我希望我解释的一切都很好。如果您需要更多信息，请问我。

Answer 1

您可以一个接一个地放置 <img> 标签，并为它们指定相同的 class 名称。然后给
background-size: cover; 属性 到 class.

Answer 2

html 和 css 代码

        <img src="firstimgae.jpg">
        <img src="secondimage.jpg">
    </div>```

```.photos {
    background-size: cover;
}```