CSS - background-origin 屬性

CSS background-origin 屬性用於設定背景的起始位置，可以是從邊框的起始位置、邊框內或填充內。

語法

background-origin: padding-box | border-box | content-box | initial | inherit;

屬性值

值	描述
padding-box	背景影像從填充邊緣的左上角開始。這是預設值。
border-box	背景影像從邊框的左上角開始。
content-box	背景影像從內容的左上角開始。
initial	將屬性設定為其初始值。
inherit	從父元素繼承屬性。

CSS 背景起始位置示例

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

填充邊緣的左上角

要使背景影像從填充邊緣的左上角開始，我們使用 padding-box 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .padding-box {
            background-origin: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="padding-box">background origin padding-box</div>

</body>

</html>

邊框的左上角

要使背景影像從邊框的左上角開始，我們使用 border-box 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .border-box {
            background-origin: border-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="border-box">background origin border-box</div>

</body>

</html>

內容的左上角

要使背景影像從內容的左上角開始，我們使用 content-box 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .content-box {
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="content-box">background origin content-box</div>

</body>

</html>

支援的瀏覽器

屬性
background-origin	4.0	9.0	4.0	3.0	10.5

css_properties_reference.htm

列印頁面