CSS 背景位置

2024-04-12 20:39:03 423

示例

该background-position属性用于指定背景图像或渐变的起始位置

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

使用X和Y坐标设置位置，并使用CSS内使用的任何单位设置位置。

单元描述值％值％水平偏移的百分比相对于（背景定位区域的宽度-背景图像的宽度）。
垂直偏移的百分比相对于（背景定位区域的高度-背景图像的高度）
相对于图像的大小background-size。值px值px相对于背景定位区域的左上角偏移背景图像的长度（以像素为单位）

CSS中的单位可以通过不同的方法指定（请参见此处）。

除了上面的速记属性外，还可以使用速记背景属性background-position-x和background-position-y。这些使您可以分别控制x或y位置。

注意：Firefox（版本31-48）2以外的所有浏览器均支持此功能。将于2016年9月发布的Firefox49将支持这些属性。在此之前，此StackOverflow答案中包含Firefoxhack。