CSS 提供多种方法进行图片平铺：背景平铺用于基本水平和垂直平铺；渐变平铺用于创建平滑过渡；背景图片位置可控制平铺的起始位置；背景尺寸用于指定平铺图片的尺寸；CSS 图层可实现复杂平铺布局，例如滑动效果。
CSS 图片平铺
CSS 中有几种方法可以实现图片平铺：
1. 背景平铺 (background-repeat)
这是最简单的方法，使用 background-repeat 属性来指定图片的平铺方式：
立即学习“前端免费学习笔记（深入）”；
background-repeat: repeat;
这样，图片将在水平和垂直方向上平铺。其他 background-repeat 值包括：
-
repeat-x：仅在水平方向平铺 -
repeat-y：仅在垂直方向平铺 -
no-repeat：不平铺图片
2. 渐变平铺 (background-gradient)
渐变平铺使用 background-gradient 属性，可以在指定方向上创建平滑的图片过渡：
background: linear-gradient(to right, image1, image2);
其中 to right 指定渐变方向，image1 和 image2 是要平铺的图片。
3. 背景图片位置 (background-position)
通过使用 background-position 属性，可以定位平铺图片的起始位置：
background-image: url(image.png); background-repeat: repeat-x; background-position: left top;
这会将 image.png 在水平方向上平铺，并从左上角开始。
4. 背景尺寸 (background-size)
background-size 属性允许指定图片的尺寸：
background-image: url(image.png); background-repeat: repeat; background-size: 100% 100%;
这会将 image.png 平铺到容器的整个大小。
5. CSS 图层 (CSS Layers)
CSS 图层允许在多个层上创建复杂布局。可以使用图层来创建平铺效果：
.layer {
background-image: url(image.png);
background-repeat: repeat;
transform: translateX(50%);
animation: slide 5s infinite;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}这将创建一个平铺图片，从左向右水平滑动。
