css背景图重复出现怎么办_通过background repeat控制

background-repeat用于控制背景图重复方式，常用值包括repeat（默认，双向重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）、space（等距平铺不裁剪）、round（缩放填满）。

背景图重复出现是 css 中的默认行为，用 background-repeat 就能轻松控制是否重复、如何重复。

理解 background-repeat 的常用值

这个属性决定背景图像在元素内如何平铺。常见取值有：

• repeat（默认）：横向 + 纵向都重复
• no-repeat：完全不重复，只显示一张图
• repeat-x：仅水平方向重复
• repeat-y：仅垂直方向重复
• space：图像完整平铺，间距均匀，不裁剪
• round：缩放图像以刚好填满容器，可能轻微拉伸

让背景图只显示一次（最常用）

多数情况下，你只想让 logo 或装饰图出现一次，不希望它密密麻麻铺满整个区域：

div {   background-image: url('icon.png');   background-repeat: no-repeat; }

配合 background-position 可精准定位，比如居中：
background-position: center; 或 background-position: 20px 30px;

控制重复方向或实现特殊布局

有些设计需要有限度的重复：

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

• 做一条横贯顶部的装饰条？用 repeat-x + top
• 侧边栏竖线分割？用 repeat-y + right
• 想铺满又不想切图？试试 space，尤其适合图标网格
• 响应式背景要严丝合缝？round 会自动缩放图像适配尺寸

简写写法别漏掉 repeat

用 background 简写时，background-repeat 是其中一环，顺序为：
background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];

例如：

div {   background: #f0f0f0 url('bg.png') top left / auto no-repeat; }

这里 no-repeat 明确写在最后，覆盖了默认的 repeat。