cssbackground-position和background-repeat详解-css教程-PHP中文网

background-position决定背景图起始位置，background-repeat控制平铺方式；二者结合可精准控制背景显示，支持多背景分层设置，实现复杂响应式设计效果。

cssbackground-position和background-repeat详解

在CSS布局中，

background-position

登录后复制

和

background-repeat

登录后复制

是两个核心属性，它们共同决定了背景图片在元素内部的呈现方式。简单来说，

background-position

登录后复制

负责背景图片的起始位置，而

background-repeat

登录后复制

则控制图片是否以及如何平铺。理解它们，能让你对网页背景的掌控力提升一个档次，远不止“放张图”那么简单。

解决方案

要深入理解

background-position

登录后复制

和

background-repeat

登录后复制

，我们需要把它们看作是背景图片布局的两个基本维度。

background-position

登录后复制

：背景图片的“坐标”

这个属性定义了背景图片的初始位置。你可以用多种方式来指定这个位置，这正是它灵活性的体现。

立即学习“前端免费学习笔记（深入）”；

关键字定位：
- ```
top
```
  登录后复制
  ,
```
bottom
```
  登录后复制
  ,
```
left
```
  登录后复制
  ,
```
right
```
  登录后复制
  ,
```
center
```
  登录后复制
  。这些是相对父元素（或者更准确地说是背景定位区域）的预设位置。
- 例如，
```
background-position: top left;
```
  登录后复制
  会将图片左上角对齐容器的左上角。
```
background-position: center center;
```
  登录后复制
  或者简写为
```
background-position: center;
```
  登录后复制
  会将图片居中。
长度值定位（
```
px
```
登录后复制
,
em
登录后复制
,
rem
登录后复制
,
vw
登录后复制
,
vh
登录后复制
等）：
- ```
background-position: 10px 20px;
```
  登录后复制
  表示图片距离容器左边缘10像素，距离上边缘20像素。
- 这里要注意，第一个值是水平方向（X轴），第二个值是垂直方向（Y轴）。如果只提供一个值，它会被认为是水平方向，垂直方向默认是
```
center
```
  登录后复制
  。
百分比定位：
- 这是我个人觉得最“烧脑”但也最强大的方式。
```
background-position: 50% 50%;
```
  登录后复制
  看起来和
```
center
```
  登录后复制
  效果一样，但背后的逻辑完全不同。
- ```
X% Y%
```
  登录后复制
  的含义是：背景图片上的
```
X%
```
  登录后复制
  点，与容器（或背景定位区域）上的
```
X%
```
  登录后复制
  点对齐。
- 举个例子：
```
background-position: 50% 50%;
```
  登录后复制
  意味着背景图片的中心点（50%）与容器的中心点（50%）对齐。
- ```
background-position: 0% 0%;
```
  登录后复制
  实际上等同于
```
top left
```
  登录后复制
  ，图片的左上角（0%）与容器的左上角（0%）对齐。
- ```
background-position: 100% 100%;
```
  登录后复制
  等同于
```
bottom right
```
  登录后复制
  ，图片的右下角（100%）与容器的右下角（100%）对齐。
- 这种相对性让它在响应式设计中特别有用。

background-repeat

登录后复制

：背景图片的“平铺策略”

这个属性决定了背景图片是否以及如何重复填充其所在的区域。

```
no-repeat
```
登录后复制
：
- 图片只显示一次，不重复。这是最常见的用法之一，尤其当图片是logo或特定装饰时。
```
repeat
```
登录后复制
：
- 默认值。图片会在水平和垂直方向上都重复，直到填满整个背景区域。如果图片不能完整填充，边缘部分会被裁剪。
```
repeat-x
```
登录后复制
：
- 图片只在水平方向（X轴）重复。垂直方向只显示一次。
```
repeat-y
```
登录后复制
：
- 图片只在垂直方向（Y轴）重复。水平方向只显示一次。
```
space
```
登录后复制
：
- 这个值很有趣，它会在图片之间均匀地分配空间，使图片尽可能多地重复，同时不裁剪任何图片。如果不能完整填充，图片之间会留有空白。
```
round
```
登录后复制
：
- 这个值更巧妙。它会通过调整图片的大小（拉伸或压缩）来确保背景区域能容纳整数个图片，并且没有空白。这在创建无缝纹理时非常有用。

结合使用：

这两个属性通常会一起使用。比如，你可能想让一个小的图标只在顶部居中显示一次：

.element {
  background-image: url('icon.png');
  background-position: center top;
  background-repeat: no-repeat;
}

登录后复制

或者，你可能有一个背景纹理，想让它在水平方向上平铺，但垂直方向只显示一次：

.header {
  background-image: url('texture.png');
  background-position: top left; /* 或者其他你觉得合适的起始点 */
  background-repeat: repeat-x;
}

登录后复制

为什么我的背景图片总是无法精准定位？深入理解

background-position

登录后复制

的相对性与参照点

说实话，这是我在初学CSS时经常遇到的一个“坑”。背景图片定位不准，很多时候并不是我们代码写错了，而是对

background-position

登录后复制

的参照点和相对性理解不够透彻。

Vegas Background全屏背景和幻灯片

Vegas Background是一个jQuery插件，以美丽的全屏背景添加到您的网页,可以创造出惊人的幻灯片。

查看详情

首先，我们要明确

background-position

登录后复制

的定位是相对于背景定位区域（background positioning area）而言的。默认情况下，这个区域是元素的padding box。这意味着，如果你给元素设置了

padding

登录后复制

，背景图片会从

padding

登录后复制

的内边缘开始定位，而不是从

border

登录后复制

或

margin

登录后复制

开始。如果你想改变这个参照点，可以使用

background-origin

登录后复制

属性，比如设置为

content-box

登录后复制

，那么背景图片就会从内容的左上角开始定位。这个细节，很多时候被大家忽略了，但它对精确布局至关重要。

其次，

background-position

登录后复制

的百分比值是最容易让人困惑的。我们前面提到

50% 50%

登录后复制

是将背景图片的中心与容器的中心对齐。但这个“中心”是如何计算的呢？

它的计算公式是：

背景图片左边缘位置 = (容器宽度 - 背景图片宽度) * X%

登录后复制

背景图片上边缘位置 = (容器高度 - 背景图片高度) * Y%

登录后复制

举个例子，一个200px宽的容器，里面有一个50px宽的背景图片。如果你设置

background-position: 50% 0;

登录后复制

。水平位置会是

(200px - 50px) * 50% = 150px * 0.5 = 75px

登录后复制

。这表示背景图片的左边缘会距离容器左边缘75px。所以，

50%

登录后复制

并不是指图片向右移动了容器宽度的一半，而是图片自身的50%位置与容器的50%位置对齐。这是一种“相对相对”的定位方式，需要多加练习才能真正掌握。

另一个影响定位感知的因素是

background-size

登录后复制

。如果你的背景图片被

cover

登录后复制

或

contain

登录后复制

，或者被指定了固定大小，那么

background-position

登录后复制

的效果也会随之变化。比如，一张被

background-size: cover;

登录后复制

的图片，它可能会被放大或缩小，甚至裁剪，这时你用

center

登录后复制

定位，它依然会居中，但显示出来的部分可能和你预期不同，因为图片本身的大小已经变了。

实际操作建议： 当我遇到定位难题时，我通常会从最简单的

no-repeat

登录后复制

开始调试，然后逐步调整

background-position

登录后复制

。我会先尝试像素值，因为它们最直观。如果需要响应式，再切换到百分比，并结合浏览器开发者工具，实时观察图片的位置变化，这比纯粹的理论推导要高效得多。

.my-element {
  width: 300px;
  height: 200px;
  border: 2px dashed gray;
  background-image: url('https://via.placeholder.com/50x50/FF0000/FFFFFF?text=ICON');
  background-repeat: no-repeat;
  /* 默认：从padding-box左上角开始 */
  /* background-position: 10px 10px; */ /* 距离左上角10px */

  /* 改变参照点到content-box */
  padding: 20px;
  background-origin: content-box;
  background-position: 10px 10px; /* 现在是距离内容区域左上角10px */

  /* 百分比定位的复杂性 */
  /* background-position: 50% 50%; */ /* 图片中心与容器padding-box中心对齐 */
  /* background-position: 0% 0%; */ /* 图片左上角与容器padding-box左上角对齐 */
  /* background-position: 100% 100%; */ /* 图片右下角与容器padding-box右下角对齐 */
}

登录后复制

除了简单的平铺，

background-repeat

登录后复制

的

space

登录后复制

和

round

登录后复制

模式能带来哪些意想不到的设计效果？

大多数开发者在使用

background-repeat

登录后复制

时，可能只停留在

repeat

登录后复制

、

no-repeat

登录后复制

、

repeat-x

登录后复制

和

repeat-y

登录后复制

这几个基本值上。这就像你只用了画笔最粗的笔触，却忽略了精细的笔尖。然而，

space

登录后复制

和

round

登录后复制

这两个值，在特定场景下能提供非常优雅且自动化的解决方案，为你的设计带来意想不到的惊喜。

space

登录后复制

模式：均匀间隔，避免裁剪

background-repeat: space;

登录后复制

的核心思想是“公平”。它会尝试尽可能多地平铺背景图片，但绝不会裁剪任何一个图片实例。如果图片之间有剩余空间，这些空间会被均匀地分配在图片之间。

设计效果与场景：

水平或垂直分隔线： 想象你需要一系列小图标或短线段作为列表项的分隔符。如果使用
```
repeat-x
```
登录后复制
，最后一个图标很可能被裁剪。而
```
space
```
登录后复制
则能确保所有图标完整显示，并在它们之间留出相等的间距，视觉上非常整洁。
导航栏底部装饰： 在一个宽度不固定的导航栏底部，用
```
space
```
登录后复制
平铺小装饰图案，可以保证无论导航栏多宽，图案都能完整显示且间距均匀，避免了手动计算间距的麻烦。
响应式图标列表： 当容器宽度变化时，
```
space
```
登录后复制
会自动调整图片间的间距，保持视觉上的平衡，而无需媒体查询。

.gallery-strip {
  width: 100%;
  height: 80px;
  background-image: url('https://via.placeholder.com/60x60/007bff/FFFFFF?text=PIC');
  background-repeat: space; /* 图片之间均匀分布空间 */
  background-position: center; /* 确保图片垂直居中 */
  border: 1px solid #ddd;
}

登录后复制

round

登录后复制

模式：无缝平铺，自适应大小

background-repeat: round;

登录后复制

则更注重“完整性”和“自适应”。它会调整背景图片的大小，使其能够以整数次平铺，从而完全填充背景区域，并且不会有任何裁剪或空白。图片可能会被轻微拉伸或压缩。

设计效果与场景：

无缝纹理背景： 当你需要一个重复的图案作为背景，但又不想看到因为图片裁剪或空白导致的“断裂感”时，
```
round
```
登录后复制
是理想选择。它会确保图案完美衔接，形成一个完整的视觉块。
网格状布局： 如果你有一系列小方块或圆形作为背景，
```
round
```
登录后复制
可以确保它们以一个完美的网格形式排列，并且每个元素都是完整的，即使容器大小变化，它们也会相应地微调大小以适应。
边框或装饰条： 对于由重复小元素组成的边框，
```
round
```
登录后复制
能确保边框的完整性和连续性，无论边框长度如何。

.pattern-background {
  width: 100%;
  height: 150px;
  background-image: url('https://via.placeholder.com/40x40/28a745/FFFFFF?text=X');
  background-repeat: round; /* 图片会被拉伸或压缩以完整填充 */
  border: 1px solid #ddd;
}

登录后复制

这两个值在实际项目中，可以大大简化一些原本需要复杂计算或JavaScript才能实现的响应式背景效果。它们让CSS在处理这类布局时，变得更加智能和自动化。我个人在设计一些模块化组件时，非常喜欢用

space

登录后复制

来处理图标或小元素的列表布局，因为它能很好地平衡美观和实用性。

如何在多背景图片场景下，灵活控制每个背景的定位与重复行为？

现代CSS允许我们为一个元素指定多个背景图片，这为设计带来了极大的灵活性和创造空间。但随之而来的挑战是，如何分别控制这些图片的定位和重复行为？其实，这并不复杂，CSS提供了一种非常直观的列表式语法来处理多背景。

当你为一个元素设置多个背景图片时，你需要使用逗号将它们分隔开。然后，对于

background-position

登录后复制

、

background-repeat

登录后复制

、

background-size

登录后复制

等相关属性，你也需要提供一个逗号分隔的值列表，这些值会按照顺序与对应的背景图片一一匹配。

基本语法：

.multi-background-element {
  background-image: url('image1.png'), url('image2.png'), url('image3.png');
  background-position: top left, center center, bottom right;
  background-repeat: no-repeat, repeat-x, repeat-y;
  /* 也可以设置 background-size, background-attachment, background-origin, background-clip */
  background-size: 50px 50px, 100% auto, 20px 20px;
}

登录后复制

关键点：

顺序匹配：
```
background-image
```
登录后复制
列表中第一个图片（
```
image1.png
```
登录后复制
）会对应
```
background-position
```
登录后复制
列表中的第一个值（
```
top left
```
登录后复制
），
```
background-repeat
```
登录后复制
列表中的第一个值（
```
no-repeat
```
登录后复制
），以此类推。
层叠顺序： 最先声明的背景图片（
```
image1.png
```
登录后复制
）会显示在最上层，后续的图片则依次堆叠在其下方。这就像Photoshop的图层一样，最上面的图层会覆盖下面的图层。
值不足时的循环： 如果某个属性的值列表少于图片列表，那么它的值会循环使用。例如，如果有三张图片，但你只提供了两个
```
background-repeat
```
登录后复制
值：
```
no-repeat, repeat
```
登录后复制
，那么第三张图片会使用第一个值
```
no-repeat
```
登录后复制
。这在某些重复模式下非常方便。

实际应用场景：

复杂纹理与Logo叠加： 底部是一个大面积的平铺纹理（
```
repeat
```
登录后复制
），中间是一个半透明的Logo（
```
no-repeat
```
登录后复制
，
```
center
```
登录后复制
），顶部可能是一些小装饰（
```
repeat-x
```
登录后复制
）。
响应式背景： 结合媒体查询，可以为不同屏幕尺寸加载不同的背景图片组合或调整它们的定位。
视差滚动效果： 配合
```
background-attachment: fixed;
```
登录后复制
，可以创建多层背景的视差滚动效果。

一个多背景示例：

想象一个卡片组件，我们想在左上角放一个装饰性图标，底部有一个渐变，同时整个卡片有一个平铺的纹理。

.card {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  position: relative; /* 如果内部有定位元素 */

  /* 定义多个背景图片，从上到下：图标、渐变、纹理 */
  background-image:
    url('https://via.placeholder.com/30x30/FFD700/000000?text=⭐'), /* 最上层：星星图标 */
    linear-gradient(to bottom, transparent, rgba(0,0,0,0.1)), /* 中间层：底部渐变 */
    url('https://via.placeholder.com/50x50/e0e0e0/FFFFFF?text=BG'); /* 最底层：平铺纹理 */

  /* 分别设置每张图片的定位 */
  background-position:
    10px 10px, /* 星星图标：距离左上角10px */
    bottom,     /* 渐变：从底部开始 */
    top left;   /* 纹理：从左上角开始 */

  /* 分别设置每张图片的重复行为 */
  background-repeat:
    no-repeat, /* 星星图标：不重复 */
    no-repeat, /* 渐变：不重复 (它本身是填充整个区域的) */
    repeat;    /* 纹理：水平垂直都重复 */

  /* 分别设置每张图片的大小 */
  background-size:
    30px 30px, /* 星星图标 */
    100% 50%,  /* 渐变：宽度100%，高度50% */
    auto;      /* 纹理：保持原始大小 */
}

登录后复制

在处理多背景时，调试是不可避免的。利用浏览器的开发者工具，你可以逐个关闭或调整背景图片，这能帮你快速定位问题。记住，层叠顺序是“先写在上，后写在下”，这和我们直觉中的“后写的覆盖先写的”有所不同，需要特别注意。

以上就是cssbackground-position和background-repeat详解的详细内容，更多请关注php中文网其它相关文章！