想法是使用多个相互叠加的背景来模拟这样的效果:
body {
margin:0;
min-height:500px;
height:100vh;
background:
/*the main background*/
url(https://picsum.photos/3744/5616?image=742) center,
/*repeat the left part*/
url(https://picsum.photos/3744/5616?image=742) 40% 50%,
url(https://picsum.photos/3744/5616?image=742) 30% 50%,
url(https://picsum.photos/3744/5616?image=742) 20% 50%,
url(https://picsum.photos/3744/5616?image=742) 10% 50%,
url(https://picsum.photos/3744/5616?image=742) 0% 50%,
/*repeat the right part*/
url(https://picsum.photos/3744/5616?image=742) 60% 50%,
url(https://picsum.photos/3744/5616?image=742) 70% 50%,
url(https://picsum.photos/3744/5616?image=742) 80% 50%,
url(https://picsum.photos/3744/5616?image=742) 90% 50%,
url(https://picsum.photos/3744/5616?image=742) 100% 50%;
background-repeat:no-repeat;
background-size:contain;
}
根据图像,您可以调整背景的百分比和数量以控制重复。这是对第一个代码的改进,通过减少重复的步骤来隐藏左侧不需要的部分:
全屏运行并比较这段代码和之前的代码
body {
margin:0;
min-height:500px;
height:100vh;
background:
/*the main background*/
url(https://picsum.photos/3744/5616?image=742) center,
/*repeat the left part more than the right*/
url(https://picsum.photos/3744/5616?image=742) 45% 50%,
url(https://picsum.photos/3744/5616?image=742) 40% 50%,
url(https://picsum.photos/3744/5616?image=742) 35% 50%,
url(https://picsum.photos/3744/5616?image=742) 30% 50%,
url(https://picsum.photos/3744/5616?image=742) 25% 50%,
url(https://picsum.photos/3744/5616?image=742) 20% 50%,
url(https://picsum.photos/3744/5616?image=742) 15% 50%,
url(https://picsum.photos/3744/5616?image=742) 10% 50%,
url(https://picsum.photos/3744/5616?image=742) 5% 50%,
url(https://picsum.photos/3744/5616?image=742) 0% 50%,
/*repeat the right part*/
url(https://picsum.photos/3744/5616?image=742) 60% 50%,
url(https://picsum.photos/3744/5616?image=742) 70% 50%,
url(https://picsum.photos/3744/5616?image=742) 80% 50%,
url(https://picsum.photos/3744/5616?image=742) 90% 50%,
url(https://picsum.photos/3744/5616?image=742) 100% 50%;
background-repeat:no-repeat;
background-size:contain;
}
更新
这是您的图像的代码:
body {
margin:0;
min-height:500px;
height:100vh;
background:
/*the main background*/
url(https://i.stack.imgur.com/76q2w.png) center,
/*repeat the left part*/
url(https://i.stack.imgur.com/76q2w.png) 40% 50%,
url(https://i.stack.imgur.com/76q2w.png) 30% 50%,
url(https://i.stack.imgur.com/76q2w.png) 20% 50%,
url(https://i.stack.imgur.com/76q2w.png) 10% 50%,
url(https://i.stack.imgur.com/76q2w.png) 0% 50%,
/*repeat the right part*/
url(https://i.stack.imgur.com/76q2w.png) 60% 50%,
url(https://i.stack.imgur.com/76q2w.png) 70% 50%,
url(https://i.stack.imgur.com/76q2w.png) 80% 50%,
url(https://i.stack.imgur.com/76q2w.png) 90% 50%,
url(https://i.stack.imgur.com/76q2w.png) 100% 50%;
background-repeat:no-repeat;
background-size:contain;
}