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

打印页面