关闭CSS背景图片重复的几种方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《关闭CSS背景图片重复方法》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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