CSS - background-position-y 属性_CSS 菜鸟教程

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

语法


background-position-y: top | center | bottom | length | percentage | initial | inherit;

属性值

值	描述
top	将图像设置在顶部位置。
center	将图像设置在垂直中心位置。
bottom	将图像设置为底部位置。
length	将图像设置为具有给定长度的垂直位置。
percentage	根据百分比高度将图像设置在垂直位置。
initial	这会将属性设置为其初始值。
inherit	这将继承父元素的属性。

CSS 背景位置 Y 属性示例

下面描述了具有不同值的 background-position-y 属性的一些示例。

图像的顶部、底部和中心位置

为了将图像设置在顶部位置，我们使用顶部值。要将图像设置在底部，我们使用底部值，要将图像设置为垂直中心，我们使用中心值。这些内容在下面的示例中显示。


<!DOCTYPE html>
<html>

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

	 	 	 	 .position-y-bottom {
	 	 	 	 	 	 background-position-y: bottom;
	 	 	 	 }

	 	 	 	 .position-y-center {
	 	 	 	 	 	 background-position-y: center;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-position-y property</h2>
	 	 <h4>Top Value</h4>
	 	 <div class="position-y-top"></div>
	 	 <h4>Bottom value</h4>
	 	 <div class="position-y-bottom"></div>
	 	 <h4>center value</h4>
	 	 <div class="position-y-center"></div>
</body>

</html>

图像与长度的位置

要使用长度垂直定位图像，我们指定了值。这在下面的示例中显示。


<!DOCTYPE html>
<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>
	 	 <h2>CSS background-position-y property</h2>
	 	 <div class="position-y-length"></div>
</body>

</html>

使用百分比的图像位置

要沿 Y 方向定位图像，我们还可以使用百分比值。这在下面的示例中显示。


<!DOCTYPE html>
<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>
	 	 <h2>CSS background-position-y property</h2>
	 	 <div class="position-y-percent"></div>
</body>

</html>

支持的浏览器

属性
background-position-y	1.0	12.0	49.0	1.0	15.0

<< CSS - background-position-x 属性 CSS - background-repeat 属性 >>