css - 具有重复的多个背景图像

Question

我正在尝试在我的 body 上设置多个背景图像。

为了做到这一点，我做了这个可以工作的东西，但并没有真正按照我的意愿去做。

body { background-image: url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100'),url('https://picsum.photos/100/100'); 
background-repeat: no-repeat,no-repeat,no-repeat; 
background-position: center,right top,left top;
background-size: 80%,110px,110px;}

如您所见，共有三张图片，一张在中间，另外两张在两侧。

事实上，我希望中心图像具有 repeat 属性，以便真正覆盖整个 body 。但如果我这样做，其他两个背景似乎被中心背景隐藏了。我想让另外两个背景出现在第一个中心背景之前。

我还希望侧面背景是粘性的，但这是下一步。

Answer 1

试试这个:

body { 
margin: 0;
background-image: url('https://picsum.photos/100/100'); 
background-repeat: no-repeat;
background-position: center,right top,left top;
background-size: 100%;
}

body:before{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: left;
}

body:after{
content: "";
background-image: url(https://picsum.photos/100/100);
background-size: cover;
width: 200px;
height: 100vh;
float: right;
}