background-position属性

background-position属性是用来设置背景图片在元素中的位置。该属性可以使用一个或两个值来指定背景图片的位置。

语法：

background-position: x-position y-position;

其中，

x-position：可取值为left、center、right或具体的像素值。

y-position：可取值为top、center、bottom或具体的像素值。

如果只指定一个值，则第二个值默认为center。

示例：

设置背景图片在元素中居中显示：

background-position: center;

设置背景图片在元素中靠左并垂直居中显示：

background-position: left center;

设置背景图片在元素中靠右、底部对齐显示：

background-position: right bottom;

设置背景图片在元素中水平和垂直方向上都偏移20px：

background-position: 20px 20px;

相关问题

background-position属性值

background-position属性值用于设置背景图像的位置。它可以接受一个或两个值，第一个值表示水平方向的位置，第二个值表示垂直方向的位置。如果只指定一个值，则默认为水平方向的位置，垂直方向的位置为50%。

例如，background-position: center top; 表示将背景图像放置在容器的顶部中央。

background-image、background-position、background-position、background-size

background-image是CSS属性，用于设置元素的背景图像。可以使用URL指定图像的路径，也可以使用linear-gradient()或radial-gradient()指定渐变效果。

background-position是CSS属性，用于设置背景图像的位置。可以使用关键字（如top、bottom、left、right、center）或百分比值来指定位置。

background-repeat是CSS属性，用于设置背景图像的平铺方式。常用的取值有repeat（默认值，图像在水平和垂直方向上平铺）、repeat-x（图像在水平方向上平铺）、repeat-y（图像在垂直方向上平铺）和no-repeat（图像不平铺）。

background-size是CSS属性，用于设置背景图像的尺寸。可以使用关键字（如auto、cover、contain）或具体的长度值（如px、em、rem）来指定尺寸。

以下是一个示例，演示了如何使用这些属性：

div {
  background-image: url("image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}