CSS background-position-y 属性值说明
| 值 | 说明 |
|---|---|
| top | 指定背景图像顶边与背景位置层顶边的对齐方式。 |
| center | 指定背景图像中心与背景位置层中心的对齐方式。 |
| bottom | 指定背景图像底边与背景位置层底部的对齐方式。 |
| length | 指定给定背景图像的左水平边与背景位置层的左水平边的偏移。 |
| percentage | 指定背景图像相对于容器的垂直位置的偏移。0%将背景图像的左边缘与容器的左边缘对齐，100%将背景图像的右边缘与容器的右边缘对齐，50%将背景图像水平居中。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
background-position-y 属性设置每个背景的垂直位置。
可以指定一个或者多个值，以逗号分隔。
负值是有效值。
| 初始值 | top |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.backgroundPositionY=“bottom”； |
语法
background-position-y: top | center | bottom | length | percentage | initial | inherit;
具有“top”值的 background-position-y 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/onitroad-logo-black.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y 属性示例</h2>
</body>
</html>
具有“bottom”值的 background-position-y 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
background: url("/build/images/onitroad-logo-black.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y 属性示例</h2>
</body>
</html>
具有“center”值的 background-position-y 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
background: url("/build/images/onitroad-logo-black.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y 属性示例</h2>
</body>
</html>
具有“长度”值的 background-position-y 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/onitroad-logo-black.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y 属性示例</h2>
</body>
</html>
具有“百分比”值的 background-position-y 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 50%;
}
body {
padding-top: 30px;
background: url("/build/images/onitroad-logo-black.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y 属性示例</h2>
</body>
</html>
日期：2020-06-02 22:14:16 来源：oir作者：oir