CSS - background-position-y 属性

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

语法

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

属性值

值	描述
顶部 (top)	将图像设置在顶部位置。
居中 (center)	将图像设置在垂直居中位置。
底部 (bottom)	将图像设置在底部位置。
长度 (length)	使用给定的长度设置图像的垂直位置。
百分比 (percentage)	根据高度百分比设置图像的垂直位置。
初始值 (initial)	将属性设置为其初始值。
继承 (inherit)	从父元素继承该属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS background-position-y 属性示例

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

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

要将图像设置在顶部位置，我们使用 top 值。要将图像设置在底部，我们使用 bottom 值；要将图像设置为垂直居中，我们使用 center 值。这些在下面的示例中显示。

示例

Open Compiler

<!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>

使用长度定位图像

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

示例

Open Compiler

<!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 方向定位图像，我们也可以使用百分比值。这在下面的示例中显示。

示例

Open Compiler

<!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_properties_reference.htm

打印页面