Question

我正在尝试在我的身体上设置多个背景图像

为了做到这一点，我做到了这一点，但并没有真正做到我想要的

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

您将看到，有3张图像，其中一张位于中央，两张位于侧面。

实际上，我想使用具有属性repeat的中心图像，以便真正覆盖整个身体。但是如果我这样做的话，其他两个背景似乎被中间一个隐藏了。我想将其他两个背景放在第一个中心背景之前。

我也希望侧面的背景保持粘性，但这是下一步^^

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

具有重复的多个背景图像

1 个答案: