关闭CSS背景图片重复显示的方法

想要让网页背景图片不再重复平铺、精准控制其显示位置与尺寸？关键只需设置 `background-repeat: no-repeat` 即可彻底禁用默认的平铺行为，再灵活搭配 `background-position` 居中或定位、`background-size`（如 `cover` 或 `contain`）适配容器，甚至通过现代简写语法一行搞定全部配置——无论是单图居中展示、顶部横条、左侧图标固定，还是响应式全屏背景，这篇实用指南都为你清晰拆解核心技巧与常见组合，助你轻松实现专业级背景控制效果。

关闭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。顺序不能错，否则部分值可能失效。

今天关于《关闭CSS背景图片重复显示的方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！