如何创建背景图像的静态网格
如何创建背景图像的静态网格
提问于 2018-07-03 00:00:05
尝试在CSS中创建一个类似于各种图像的网格的页面背景，所有图像都被裁剪和调整为相同的宽度和高度。
理想情况下，此背景将从我创建的特定文件夹(assets/images/ 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;
}回答 1
Stack Overflow用户
发布于 2018-07-03 00:08:03
您可以考虑多个背景，然后调整每个图像的位置：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51139917
复制相关文章
相似问题
腾讯云开发者
