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)

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

通过使用 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%);
  }
}

这将创建一个平铺图片，从左向右水平滑动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！