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)	從父元素繼承該屬性。

CSS background-position-y 屬性示例

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

影像的頂部、底部和居中位置

要將影像設定在頂部位置，我們使用 top 值。要將影像設定在底部，我們使用 bottom 值；要將影像設定為垂直居中，我們使用 center 值。這些在下面的示例中顯示。

示例

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

列印頁面