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

时间:2018-07-02 16:00:05

标签: css background

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

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

有些类似于附件中的图像,但是具有多个图像,而不仅仅是《星球大战》海报重复出现: enter image description here

.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;
}

1 个答案:

答案 0 :(得分:0)

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

.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>