CSS 属性

background-position-y 属性设置元素背景图像的初始垂直位置。图像的位置是相对于background-origin属性设置的值。

 如果在其后的元素上进行 background 或 background-position 声明，则 background-position-y 的值会被覆盖。

属性值

此属性的值可以指定为一个或多个值，以逗号分隔。

  • top:背景图像的上边缘与背景位置图层的上边缘对齐。

  • center:背景图像的中心背景图像与背景位置图层的中心对齐。

  • bottom:背景图像的下边缘与背景位置图层的下边缘对齐。

  • <length>:背景图像的水平边缘相对于背景位置图层顶部水平边缘的偏移量。

  • <percentage>:它是背景图像相对于包含元素的垂直位置的偏移。

    • 0%:背景图像的上边缘与容器的上边缘对齐。

    • 100%:底部背景图像的边缘与容器的底部边缘对齐。

    • 50%:垂直居中的背景图像。

适用范围

所有 HTML 元素。

DOM 语法

object.style.backgroundPositionY = "top 50px";

CSS background-position-y: top

这是图像垂直位于顶部的示例:

<html>
<head>
<style>  
   .position-y-top {
      background-image: url('/css/images/tutimg.png');
      background-position-y: top;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-y-top"></div>
</body>
</html>

CSS background-position-y: bottom

这里是图像垂直位于底部的示例:

<html>
<head>
<style>  
   .position-y-bottom {
      background-image: url('/css/images/tutimg.png');
      background-position-y: bottom;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-y-bottom"></div>
</body>
</html>

CSS background-position-y: center 

以下是图像垂直位于中心的示例:

<html>
<head>
<style>  
   .position-y-center {
      background-image: url('/css/images/tutimg.png');
      background-position-y: center;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-y-center"></div>
</body>
</html>

CSS background-position-y: <length> 

以下是使用长度值垂直定位图像的示例:

<html>
<head>
<style>  
   .position-y-length {
      background-image: url('/css/images/tutimg.png');
      background-position-y: 100px;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-y-length"></div>
</body>
</html>

CSS background-position-y: <percentage> 

以下是使用百分比值垂直定位图像的示例:

<html>
<head>
<style>  
   .position-y-percent {
      background-image: url('/css/images/tutimg.png');
      background-position-y: 80%;
      background-repeat: no-repeat;
      width: 500px;
      height: 300px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="position-y-percent"></div>
</body>
</html>