关闭CSS背景图片重复显示需设background-repeat为no-repeat；可单独控制横向（repeat-x）或纵向（repeat-y）平铺；常配合background-position、background-size等实现精确定位与适配。
关闭CSS背景图片的重复显示，关键在于设置 background-repeat 属性为不平铺的值。
用 no-repeat 完全禁止平铺
这是最常用的方式，让背景图只显示一次，居于元素左上角（默认位置）：
div {
background-image: url("bg.jpg");
background-repeat: no-repeat;
}
此时无论元素多大，图片都只渲染一遍，多余区域留白或由背景色填充。
控制横向或纵向单独不重复
有时需要某一个方向不重复，另一个方向仍平铺，可用以下组合值：
立即学习“前端免费学习笔记（深入）”；
- repeat-x：仅水平方向重复（横向平铺）
- repeat-y：仅垂直方向重复（纵向平铺）
- no-repeat：两个方向都不重复（已提及）
例如，做一条顶部横条背景，可写：background-repeat: repeat-x;；若只想在左侧固定一张图标，就用 no-repeat 并配合 background-position 调整位置。
注意与 background-size 和 background-position 配合使用
仅设 no-repeat 不够时，常需搭配其他属性才能达到理想效果：
- 用
background-size: cover;或contain;让单张图片适配容器尺寸 - 用
background-position: center;把图片居中显示（避免卡在左上角） - 用
background-attachment: fixed;可实现视差滚动效果（非必需，但常一起出现）
典型全功能写法示例：
header {
background: url("hero.jpg") no-repeat center/cover;
}
现代简写语法一步到位
CSS支持 background 简写属性，把图片、重复方式、定位、尺寸等一并声明：
section {
background: url("pattern.png") no-repeat top right / 50px 50px;
}
其中 no-repeat 位置固定，后面跟 position（如 top right），再加 / 分隔 size。顺序不能错，否则部分值可能失效。
