背景图是网页设计中不可或缺的一部分,能够给页面增加层次感和美感。很多时候,为了让背景图贴合整个页面,我们需要进行重复铺满。在CSS中,我们可以使用“repeat-x”和“repeat-y”来设置背景图的重复方式,本文将介绍使用“repeat-y”实现无限重复垂直滚动的技术。
一、什么是“repeat-y”
“repeat-y”是CSS中的一个背景图片属性,它的作用是横向重复(水平方向),垂直方向不重复,这也是和“repeat-x”区别的地方。“repeat-x”则是横向不重复,垂直方向重复。
使用“repeat-y”可以让背景图像不断重复铺满到下一行,从而实现背景无限垂直滚动的效果。
二、使用“repeat-y”实现简单的垂直滚动
首先先来做一个简单的实验,看看使用“repeat-y”能够实现什么样的效果。
代码如下:
```html
body {
margin: 0;
padding: 0;
}
.container {
height: 100vh;
background-image: url("https://picsum.photos/200/200");
background-repeat: repeat-y;
}