调整背景图片的位置，居中，靠左，靠右等（background-position 用法详细介绍）

zzzley

已于 2023-02-17 14:43:53 修改

阅读量2.5k

点赞数

分类专栏：前端文章标签： css 前端 css3

于 2023-02-16 15:13:06 首次发布

本文链接：https://blog.csdn.net/weixin_43286995/article/details/129062500

版权

前端专栏收录该内容

20 篇文章

订阅专栏

background-position属性用于定义背景图片在容器内的起始位置，可以使用关键字、百分比或具体像素值进行定位。当设置为负值时，背景图片会被裁剪。换算关系涉及关键字转换为百分比或像素值，根据容器和背景图片的尺寸计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、语法

二、定位原理

在这里插入图片描述
（图一）
容器：background作用的元素，即其视口，超出该容器的部分，将被隐藏。
如（图一），以容器的起始点作为原点（0，0）绘制背景图片的起始位置坐标轴。
background-position将定义背景图片起始于坐标轴的哪个位置，浏览器将其他部分隐藏，仅显示容器内的背景内容。

例子：
在这里插入图片描述
（图二）

（图三）
如（图二），设置background-position: -50px -50px，背景图的起始点位于（-50px, -50px）；
由此，显示的背景是被截断后的容器内的图片内容，如（图三）所示，其他象限遮罩部分图片不可见。
总结：background-position为背景图的起始点，可相对整个坐标轴进行定位，且仅容器内的背景图内容可见。

三、换算关系

换算关系：关键字 -> 百分比 -> px（or rem em等）

1、关键字 -> 百分比
center -> 50%
left top -> 0%
right bottom -> 100%

2、百分比 -> px
(容器(container)的size — 背景图片的size) * 百分比

如：background-position: a% b%;
换算：
      x = (containerWidth - bgWidth) * a%
      y = (containerHeight - bgHeight) * b%