用CSS background-image配合background-repeat可在有宽高的容器中平铺图片：repeat全向、repeat-x横向、repeat-y纵向、no-repeat不平铺；需显式设置容器尺寸或填充内容防塌陷。

用 CSS 的 background-image 配合 background-repeat 就能控制图片在指定区域平铺，关键在于把背景设在有明确宽高的容器上，而不是直接操作 <img> 标签。

给容器设置背景图并开启平铺

图片平铺是背景行为，所以要把图片设为某个块级元素（比如 <div>）的背景，再用 background-repeat 控制重复方式：

• 默认值 repeat：横向纵向都平铺（最常用）
• repeat-x：只横向平铺
• repeat-y：只纵向平铺
• no-repeat：不平铺，只显示一次

确保容器有尺寸，否则看不到平铺效果

如果父容器没有设定 width 和 height，或者内容为空，它可能高度塌陷，导致背景区域为 0，平铺就不可见。解决方法：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给容器显式设置宽高，例如 width: 300px; height: 200px;
• 或让容器包裹有高度的内容（如文字、内边距）
• 也可用 min-height 防止过小

完整示例代码

以下代码让一张小纹理图在 400×300 区域内无缝平铺：

立即学习“前端免费学习笔记（深入）”；

<div style="width: 400px; height: 300px;
  background-image: url('pattern.png');
  background-repeat: repeat;">
</div>

进阶：控制起始位置和缩放（可选）

若需微调平铺效果，可补充：

• background-position: 0 0; —— 设定首张图左上角起点
• background-size: 20px 20px; —— 缩放单个平铺单元大小（适合调整纹理密度）
• background-origin: padding-box; —— 指定平铺从哪开始计算（通常默认即可）