用css background-image配合background-repeat可在有宽高的容器中平铺图片：repeat全向、repeat-x横向、repeat-y纵向、no-repeat不平铺；需显式设置容器尺寸或填充内容防塌陷。
用 CSS 的 background-image 配合 background-repeat 就能控制图片在指定区域平铺，关键在于把背景设在有明确宽高的容器上，而不是直接操作 <img> 标签。
给容器设置背景图并开启平铺
图片平铺是背景行为，所以要把图片设为某个块级元素（比如 <div>）的背景，再用 <code>background-repeat 控制重复方式：
- 默认值
repeat：横向纵向都平铺（最常用） -
repeat-x：只横向平铺 -
repeat-y：只纵向平铺 -
no-repeat：不平铺，只显示一次
确保容器有尺寸，否则看不到平铺效果
如果父容器没有设定 width 和 height，或者内容为空，它可能高度塌陷，导致背景区域为 0，平铺就不可见。解决方法：
- 给容器显式设置宽高，例如
width: 300px; height: 200px; - 或让容器包裹有高度的内容（如文字、内边距）
- 也可用
min-height防止过小
完整示例代码
以下代码让一张小纹理图在 400×300 区域内无缝平铺：
进阶：控制起始位置和缩放（可选）
若需微调平铺效果，可补充：
-
background-position: 0 0;—— 设定首张图左上角起点 -
background-size: 20px 20px;—— 缩放单个平铺单元大小（适合调整纹理密度） -
background-origin: padding-box;—— 指定平铺从哪开始计算（通常默认即可）
