CSS - background-position-x 屬性

CSS background-position-x 屬性設定元素背景影像的初始水平位置。影像的位置相對於由background-origin 屬性設定的值。

語法

background-position-x: left | center | right | length | percentage | initial| inherit;

屬性值

值	描述
left	將影像設定為左側位置。
center	將影像設定為水平居中位置。
right	將影像設定為右側位置。
length	使用給定長度將影像設定為水平位置。
percentage	以百分比高度的形式設定影像的水平位置。
initial	這將屬性設定為其初始值。
inherit	這從父元素繼承屬性。

CSS 背景位置 X 示例

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

影像的左側位置

要將影像的位置設定為左側，我們使用 left 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

影像的右側位置

要將影像的位置設定為右側，我們使用 right 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-x-left {
            background-image: url('/css/images/tutimg.png');
            background-position-x: right;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

影像的中心位置

要將影像的位置設定為中心，我們使用 center 值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-x-left {
            background-image: url('/css/images/tutimg.png');
            background-position-x: center;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

使用長度定點陣圖像

要使用長度定點陣圖像，我們指定該值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

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

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

使用百分比定點陣圖像

要沿 X 方向定點陣圖像，我們也可以使用百分比值。這在下面的示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .position-x-left {
            background-image: url('/css/images/tutimg.png');
            background-position-x: 80%;
            background-repeat: no-repeat;
            width: 500px;
            height: 300px;
            border: 3px solid black;
        }
    </style>
</head>

<body>
    <h2>CSS background-position-x property</h2>
    <div class="position-x-left"></div>
</body>

</html>

支援的瀏覽器

屬性
background-position-x	1.0	12.0	49.0	1.0	15.0

css_properties_reference.htm

列印頁面