CSS | background-position 属性

在 CSS 中background-position属性主要用于将图像设置在某个位置。
句法：

background-position: value;

属性值：
有一些重要的属性值可用于将图像设置在某个位置。

• 最初的
• 继承
• 左上角
• 左中
• 左下角
• 中上
• 中心 中心
• 中底
• 右上角
• 右中
• 右下角
• x%y%
  注意：这里 x% 表示水平位置，y% 表示相对于初始位置的垂直位置，即左上角。
• x-pos y-pos
  注意：这里的单位以像素或任何其他 CSS 单位表示。

此属性的值的示例：

• 背景位置：左上角； : 此属性用于设置左上角的图像。

html

• 输出：

• 背景位置：左居中； ：此属性用于将图像设置在左中心。

html

• 输出 ：

• 背景位置：左下角； : 此属性用于设置左下角的图像。

html

• 输出：

• 背景位置：居中顶部； : 此属性用于将图像设置在中心顶部位置

html

• 输出 ：

• 背景位置：居中； ：此属性用于将图像设置在中心位置。

html

• 输出：

• 背景位置：中心底部； : 该属性用于设置图像在中心底部位置

html

• 输出：

• 背景位置：右上角； : 此属性用于将图像设置在右上方位置

html

• 输出：

• 背景位置：右中心； ：此属性用于将图像设置在右中心位置。

html

• 输出

• 背景位置：右下角； : 该属性用于设置图像在右下角位置

html

• 输出：

• 背景位置：25% 75%； : 该属性用于设置图像，将图像设置为距左侧 25% 和距顶部 75%。

html

• 输出：

• 背景位置：30px 80px； : 此属性用于设置图像在距左侧 30 像素和距顶部 80 像素处。

html

• 输出：

支持的浏览器： background-position 属性支持的浏览器如下：

• 铬合金
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器