如何用css background-repeat和background-position调整图片

新闻中心 NEWS CENTER

2025-10-17

浏览次数：次

background-repeat控制背景图重复方式，background-position设置其位置；通过no-repeat、center等值可实现不重复居中显示，常用于美化页面与响应式设计，两者结合简写更高效。

使用 CSS 的 background-repeat 和 background-position 可以灵活控制背景图的显示方式和位置。这两个属性常用于美化页面背景、图标布局或响应式设计中。

默认情况下，背景图会水平和垂直方向重复铺满容器。通过 background-repeat 可以改变这一行为。

常用取值：

例如，防止背景图重复：

css

.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}

这个属性决定背景图在容器中的对齐方式。可以使用关键词、百分比或具体像素值。

常用关键词组合：

也可以用像素或百分比精确定位：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

示例：让背景图居中且不重复：

css

.header {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: center center;
}

实际开发中，通常将多个 background 相关属性简写为 background 或 background-image 的复合写法。

.card {
  background: url('bg.jpg') no-repeat center / cover;
}

上面代码中，no-repeat 控制不重复，center 设置位置，/ cover 是 background-size 的简写，确保图片覆盖整个区域。

基本上就这些。掌握好 repeat 和 position，就能应对大多数背景图布局需求。关键在于根据设计意图选择合适的组合，避免图片变形或错位。

以上就是如何用css background-repeat和background-position调整图片的详细内容，更多请关注其它相关文章！