background之你不知道的background-position，计算机plc编程基础知识

Background-position是CSS中用于指定背景图像在元素中的位置的属性。在设计网站时，background-position是CSS中的必备属性之一，因为它可以使设计师有更多的掌控权来实现想要的网站布局效果。

简单来说，background-position 可以接受两个值，第一个值用于指定水平方向（left，center，right），第二个值用于指定垂直方向（top，center，bottom）。比如，如果我们想要让背景图像左对齐并垂直居中，可以这样写：

```

background-position: left center;

```

但是，除了这些基本的位置值以外，还有许多其他的取值方式。

1. 百分比：我们可以将background-position的值设置为相对于背景图片的百分比，这样就可以更准确地定位图像。比如，如果我们需要背景图像在元素中水平垂直都居中，可以这样写：

```

background-position: 50% 50%;

```

这将使图像的中心点与容器的中心点重合。我们还可以根据需求进行微调，比如左下角对齐，可以这样写：

```

background-position: 0 100%;

```

注意，设置背景图像的垂直方向时，百分比是相对于容器的高度而言的，而不是相对于背景图片的高度。

2. 像素值：除了百分比以外，我们还可以用像素值来设置background-position，这将更精确地定位背景图像。

假设你要让背景图像在容器中的左上角显示，你可以这样写：

```

background-position: 0 0;

```

如果要放在右下角，可以这样写：

```

background-position: right bottom;

```

3. 关键字：还有一些关键字可以用来设置background-position，它们是：left，center，right，top，bottom。

除上面提到的示例外，还有一些其他的示例可以帮助你更好地理解这些取值方式：

```

background-position: 10% 20%; /* 背景被放置在容器宽度10%的地方，然后垂直移动了20%容器的高度 */

background-position: -10px -20px; /* 背景被放置在容器的左上角，左移了10个像素，上移了20个像素 */

background-position: center bottom; /* 背景被放置在容器的底部，水平方向上居中对齐 */

background-position: right 20px top 10px; /* 背景被放置在容器右上方，右移20个像素，上移10个像素 */

```

有了background-position，我们就可以更加灵活地设计网站，实现自己想要的效果。同时，我们也需要注意到，取值方式的不同会影响背景图像在元素中的位置，合理使用它们可以帮助我们轻松实现网站设计的想法。