background-position-y
Baseline 广泛可用 *
background-position-y CSS 属性设置每个背景图像的初始垂直位置。该位置相对于 background-origin 设置的定位层。
试一试
background-position-y: top;
background-position-y: center;
background-position-y: 25%;
background-position-y: 2rem;
background-position-y: bottom 32px;
<section class="display-block" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
background-color: navajowhite;
background-image: url("/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
height: 100%;
}
此属性的值将被在其之后应用于元素的 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 |
浏览器兼容性
加载中…