background-origin 背景原点

学习

background-origin 背景原点

2026-02-23/0/ 编辑

background-origin 背景原点

概念

background-origin 属性用于设置背景图片的定位区域，决定背景图片相对于哪个区域进行定位。

语法

background-origin: 值;

属性值

值说明定位参考
padding-box默认值，背景图片以 padding 区域为参考从内边距开始
border-box背景图片以 border 区域为参考从边框开始
content-box背景图片以 content 区域为参考从内容区开始

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-origin 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 50px solid rgba(0, 0, 0, 0.5);
            padding: 50px;
            background-image: url(images/bg16.png);
            background-color: aquamarine;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }

        .box1 {
            /* 背景图片的摆放以 padding 区域为参考（默认值）*/
            background-origin: padding-box;
        }

        .box2 {
            /* 背景图片的摆放以 border 区域为参考 */
            background-origin: border-box;
        }

        .box3 {
            /* 背景图片的摆放以 content 区域为参考 */
            background-origin: content-box;
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        h3 {
            color: #333;
            margin-bottom: 20px;
        }

        .label {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>background-origin 背景原点演示</h1>

    <h3>不同定位区域对比</h3>
    <div class="container">
        <div class="box box1">
            <strong>padding-box</strong>
            <div class="label">从padding开始（默认）</div>
        </div>

        <div class="box box2">
            <strong>border-box</strong>
            <div class="label">从border开始</div>
        </div>

        <div class="box box3">
            <strong>content-box</strong>
            <div class="label">从content开始</div>
        </div>
    </div>

    <p style="clear: both; color: #666; margin-top: 20px;">
        观察背景图片在不同原点下的位置差异。每个盒子都有50px的边框和50px的内边距。
    </p>
</body>
</html>

详细说明

1. padding-box（默认值）

背景图片以 padding 区域为参考进行定位。

background-origin: padding-box;

特点：

  • 默认值
  • 背景图片从内边距区域开始定位
  • background-position: 0 0 对应 padding 的左上角

定位计算：

  • left 0 = padding 左边缘
  • top 0 = padding 上边缘

使用场景：

  • 大多数情况下的默认行为
  • 背景图片不应该延伸到边框下方

2. border-box

背景图片以 border 区域为参考进行定位。

background-origin: border-box;

特点：

  • 背景图片从边框区域开始定位
  • background-position: 0 0 对应 border 的左上角
  • 背景图片可能被边框覆盖

定位计算：

  • left 0 = border 左边缘
  • top 0 = border 上边缘

使用场景：

  • 需要背景图片延伸到边框下方
  • 特殊的装饰效果

3. content-box

背景图片以 content 区域为参考进行定位。

background-origin: content-box;

特点：

  • 背景图片从内容区域开始定位
  • background-position: 0 0 对应 content 的左上角
  • 背景图片不会覆盖内边距

定位计算：

  • left 0 = content 左边缘
  • top 0 = content 上边缘

使用场景：

  • 背景图片只在内容区域
  • 需要明显的内边距分隔

与 background-clip 的区别

属性作用影响范围
background-origin设置背景图片的定位区域只影响背景图片
background-clip设置背景的绘制区域影响背景颜色和图片

示例对比：

.box {
    width: 200px;
    height: 200px;
    border: 20px solid rgba(0, 0, 0, 0.3);
    padding: 30px;
    background-image: url(bg.png);
    background-repeat: no-repeat;
}

/* 案例 1：默认 */
.box1 {
    /* background-origin: padding-box (默认) */
    /* background-clip: border-box (默认) */
}

/* 案例 2：只在内容区域显示 */
.box2 {
    background-origin: content-box;
    background-clip: content-box;
}

/* 案例 3：从 border 开始定位，但只在 content 区域绘制 */
.box3 {
    background-origin: border-box;
    background-clip: content-box;
}

实际应用场景

场景 1：内容区域背景

.card {
    border: 10px solid #333;
    padding: 20px;
    background-image: url(decor.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-origin: content-box; /* 背景只在内容区域 */
}

场景 2：装饰性边框背景

.decorative-border {
    border: 20px solid rgba(0, 0, 0, 0.5);
    padding: 30px;
    background-image: url(border-pattern.png);
    background-repeat: no-repeat;
    background-origin: border-box; /* 从边框开始定位 */
}

场景 3：图标定位

.icon-box {
    border: 5px solid #ddd;
    padding: 15px;
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-origin: content-box; /* 从内容区开始定位 */
}

场景 4：组合使用

.advanced {
    width: 300px;
    height: 300px;
    border: 20px solid rgba(0, 0, 0, 0.3);
    padding: 30px;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;  /* 定位从内容区开始 */
    background-clip: padding-box;   /* 绘制到 padding 区域 */
}

场景 5：多背景图

.multi-origin {
    background-image:
        url(bg1.png),
        url(bg2.png);

    background-position:
        0 0,
        100% 100%;

    background-origin:
        content-box,
        padding-box;

    background-clip:
        content-box,
        padding-box;
}

与其他属性配合

与 background-position 配合

.content-bg {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-origin: content-box;
}

与简写属性配合

/* 注意：简写中 background-origin 和 background-clip 的位置 */
/* 语法：background-position / background-size background-origin background-clip */
background: url(bg.png) no-repeat 0 0 / cover content-box padding-box;

与多背景图配合

.multi-bg {
    background:
        url(bg1.png) no-repeat 0 0 / 100px 100px content-box,
        url(bg2.png) no-repeat 100% 100% / 50px 50px padding-box;
}

注意事项

  1. 默认值：background-origin 的默认值是 padding-box
  2. 只影响背景图片：background-origin 只影响背景图片的定位，不影响背景颜色
  3. 与 background-clip 配合：通常需要配合 background-clip 使用以达到预期效果
  4. 多背景图：多张背景图可以有不同的原点
  5. 与 border 的关系：边框是否透明会影响视觉效果

浏览器兼容性

属性值ChromeFirefoxSafariIE/Edge
border-box, padding-box, content-box✅ 1.0+✅ 4.0+✅ 3.0+✅ 9.0+

常见问题

Q1: background-origin 和 background-clip 的区别？

A:

  • background-origin：控制背景图片的定位区域
  • background-clip：控制背景的绘制区域

Q2: 如何让背景图片只在内容区域显示？

.content-only {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-origin: content-box;
    background-clip: content-box;
}

Q3: 多张背景图如何设置不同的原点？

.multi-bg {
    background-image: url(bg1.png), url(bg2.png);
    background-origin: content-box, padding-box;
}

最佳实践

/* ✅ 推荐：内容区域背景 */
.content-bg {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: content-box;
}

/* ✅ 推荐：默认行为 */
.default-bg {
    background-image: url(bg.png);
    /* padding-box 是默认值 */
}

/* ✅ 推荐：装饰性背景 */
.decorative {
    background-image: url(decor.png);
    background-repeat: no-repeat;
    background-origin: border-box;
}

/* ✅ 推荐：多背景图 */
.multi-bg {
    background:
        url(bg1.png) no-repeat 0 0 / cover content-box content-box,
        url(bg2.png) no-repeat 100% 100% / cover padding-box padding-box;
}

综合示例

示例：创意卡片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-origin 综合示例</title>
    <style>
        .card {
            width: 300px;
            border: 20px solid rgba(0, 0, 0, 0.3);
            padding: 30px;
            background-image: url(icon.png);
            background-repeat: no-repeat;
            background-position: 10px center;
            background-origin: content-box;
            background-color: #f5f5f5;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .card h3 {
            margin: 0 0 15px 60px;
            color: #333;
        }

        .card p {
            margin: 0;
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>卡片标题</h3>
        <p>这是一个使用 background-origin 的示例。背景图标从内容区域开始定位。</p>
    </div>
</body>
</html>

学习笔记：background-origin 控制背景图片的定位区域，配合 background-clip 可以精确控制背景的显示范围。

猜你喜欢