关闭CSS背景图片重复显示需设background-repeat为no-repeat；可单独控制横向（repeat-x）或纵向（repeat-y）平铺；常配合background-position、background-size等实现精确定位与适配。
关闭CSS背景图片的重复显示，关键在于设置 background-repeat 属性为不平铺的值。
这是最常用的方式，让背景图只显示一次，居于元素左上角（默认位置）：
div {
background-image: url("bg.jpg");
background-repeat: no-repeat;
}此时无论元素多大，图片都只渲染一遍，多余区域留白或由背景色填充。
有时需要某一个方向不重复，另一个方向仍平铺，可用以下组合值：
立即学习“前端免费学习笔记（深入）”；
例如，做一条顶部横条背景，可写：background-repeat: repeat-x;；若只想在左侧固定一张图标，就用 no-repeat 并配合 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背景图片重复显示怎么关闭_通过background-repeat控制平铺方式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
853
收藏
