如何创建背景图像的静态网格

Question

尝试在CSS中创建类似于各种图像网格的页面背景，所有图像都被裁剪并调整为相同的宽度和高度。

理想情况下，此背景会从我创建的特定文件夹（资产/图像/ background_photos）中随机抽取jpeg，并将其沿页面上下/跨到预先定义的区域内。

有些类似于附件中的图像，但是具有多个图像，而不仅仅是《星球大战》海报重复出现：

.movie_poster_background{
    background-image: url("background_photos/star_wars.jpg");
    background-size: 150px;
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: -1;
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray;
    filter: grayscale(100%);
    opacity: 0.2;
}

Answer 1

您可以考虑多个背景，然后调整每个图像的位置：

.box{
    background-image: 
      url("https://picsum.photos/200/200?image=1069"),
      url("https://picsum.photos/200/200?image=1065"),
      url("https://picsum.photos/200/200?image=1066"),
      url("https://picsum.photos/200/200?image=1067"),
      url("https://picsum.photos/200/200?image=1068"),
      url("https://picsum.photos/200/200?image=1062");
    background-size: 200px 200px;
    background-position:0 0,200px 0,400px 0,
                        0 200px,200px 200px,400px 200px;
    background-repeat:no-repeat;
    width: 100%;
    height: 400px;
}

<div class="box"></div>