background-position-y

background-position-y CSS 属性设置每个背景图像的初始垂直位置。该位置相对于 background-origin 设置的位置层。

试试看

此属性的值会被应用于元素的任何 background 或 background-position 简写属性声明覆盖，前提是这些声明在其后被应用。

语法

css
/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* Side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

background-position-y 属性指定为一个或多个值，用逗号分隔。

值

top

将背景图像的顶边与背景位置层的顶边对齐。

center

将背景图像的垂直中心与背景位置层的垂直中心对齐。

bottom

将背景图像的底边与背景位置层的底边对齐。

<length>

给定背景图像水平边距背景位置层顶部水平边的偏移量。（某些浏览器允许为偏移量分配底边）。

<percentage>

给定背景图像的垂直位置相对于容器的偏移量。值为 0% 表示背景图像的顶边与容器的顶边对齐，值为 100% 表示背景图像的*底边*与容器的*底边*对齐，因此值为 50% 会垂直居中背景图像。

正式定义

初始值0%
适用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
百分比指背景定位区域的高度减去背景图像的高度
计算值一个列表，每个项目由以下内容组成：一个作为绝对长度和百分比组合给出的偏移量，加上一个原点关键字
动画类型可重复列表

正式语法

background-position-y = 
  [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本示例

以下示例显示了一个简单的背景图像实现，其中使用 background-position-x 和 background-position-y 分别定义图像的水平和垂直位置。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

结果

侧向相对值

以下示例显示了对侧向相对偏移语法（允许开发人员从任何边缘偏移背景）的支持。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

结果

规范

规范
CSS 背景和边框模块级别 4
# background-position-longhands

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅