CSS background-origin 属性-代码号

CSS background-origin 属性详解：控制背景图像的定位原点

概述

CSS background-origin 属性用于定义背景图像的定位区域，即指定背景图像相对于哪个盒子模型区域进行定位。这个属性决定了背景图像的起始绘制位置，是CSS背景控制中的重要属性之一。

基本语法

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

属性值详解

1. padding-box（默认值）

背景图像相对于内边距框（padding box）进行定位。图像从元素的内边距区域左上角开始绘制。

2. border-box

背景图像相对于边框框（border box）进行定位。图像从元素的边框区域左上角开始绘制。

3. content-box

背景图像相对于内容框（content box）进行定位。图像从元素的内容区域左上角开始绘制。

4. initial

将属性重置为默认值（padding-box）。

5. inherit

继承父元素的 background-origin 属性值。

盒子模型与背景定位

要理解 background-origin 属性，需要了解CSS盒子模型的基本结构：

内容框 (content-box)：包含元素的实际内容
内边距框 (padding-box)：内容框周围的内边距区域
边框框 (border-box)：内边距框周围的边框区域
外边距框 (margin-box)：边框框周围的外边距区域

基础示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - background-origin 属性示例</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            padding: 20px;
            background-color: #f5f7fa;
        }
        
        .box {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 15px dashed #3498db;
            background-image: url('https://www.ebingou.cn/biancheng/images/1.jpg');
            background-repeat: no-repeat;
            background-size: 150px;
            color: #2c3e50;
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .padding-box {
            background-origin: padding-box;
        }
        
        .border-box {
            background-origin: border-box;
        }
        
        .content-box {
            background-origin: content-box;
        }
        
        .title {
            text-align: center;
            margin: 20px 0;
            color: #2c3e50;
            font-family: Arial, sans-serif;
        }
        
        .description {
            max-width: 800px;
            margin: 0 auto 30px;
            padding: 0 20px;
            text-align: center;
            color: #7f8c8d;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1 class="title">代码号CSS学习：background-origin属性</h1>
    <p class="description">background-origin属性定义了背景图像的定位区域，控制背景图像从哪个盒子模型区域开始绘制。</p>
    
    <div class="container">
        <div>
            <h2 class="title">padding-box (默认)</h2>
            <div class="box padding-box">
                背景图像从内边距区域开始定位
            </div>
        </div>
        
        <div>
            <h2 class="title">border-box</h2>
            <div class="box border-box">
                背景图像从边框区域开始定位
            </div>
        </div>
        
        <div>
            <h2 class="title">content-box</h2>
            <div class="box content-box">
                背景图像从内容区域开始定位
            </div>
        </div>
    </div>
</body>
</html>

多背景图像示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 多背景图像示例</title>
    <style>
        .multi-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            padding: 30px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .multi-box {
            width: 100%;
            height: 250px;
            padding: 20px;
            border: 15px dashed rgba(52, 152, 219, 0.7);
            background-repeat: no-repeat;
            background-size: 100px, 80px;
            color: #2c3e50;
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .example1 {
            background-image: 
                url('https://www.ebingou.cn/biancheng/images/2.jpg'),
                url('https://www.ebingou.cn/biancheng/images/3.jpg');
            background-origin: border-box, content-box;
        }
        
        .example2 {
            background-image: 
                url('https://www.ebingou.cn/biancheng/images/4.jpg'),
                url('https://www.ebingou.cn/biancheng/images/5.jpg');
            background-origin: padding-box, border-box;
        }
        
        .example3 {
            background-image: 
                url('https://www.ebingou.cn/biancheng/images/1.jpg'),
                url('https://www.ebingou.cn/biancheng/images/6.jpg');
            background-origin: content-box, padding-box;
        }
        
        .example4 {
            background-image: 
                url('https://www.ebingou.cn/biancheng/images/3.jpg'),
                url('https://www.ebingou.cn/biancheng/images/2.jpg');
            background-origin: border-box, border-box;
        }
        
        .title {
            text-align: center;
            margin: 20px 0;
            color: #2c3e50;
            font-family: Arial, sans-serif;
        }
        
        .subtitle {
            text-align: center;
            margin-bottom: 30px;
            color: #7f8c8d;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1 class="title">代码号CSS学习：多背景图像的background-origin</h1>
    <p class="subtitle">当元素有多个背景图像时，可以为每个图像指定不同的background-origin值</p>
    
    <div class="multi-container">
        <div>
            <h3 class="title">border-box, content-box</h3>
            <div class="multi-box example1">
                第一个图像从边框开始<br>
                第二个图像从内容开始
            </div>
        </div>
        
        <div>
            <h3 class="title">padding-box, border-box</h3>
            <div class="multi-box example2">
                第一个图像从内边距开始<br>
                第二个图像从边框开始
            </div>
        </div>
        
        <div>
            <h3 class="title">content-box, padding-box</h3>
            <div class="multi-box example3">
                第一个图像从内容开始<br>
                第二个图像从内边距开始
            </div>
        </div>
        
        <div>
            <h3 class="title">border-box, border-box</h3>
            <div class="multi-box example4">
                两个图像都从边框开始
            </div>
        </div>
    </div>
</body>
</html>

实际应用场景

1. 设计精美边框效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 边框设计示例</title>
    <style>
        .design-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            padding: 40px;
            background-color: #ecf0f1;
        }
        
        .design-box {
            width: 280px;
            height: 180px;
            padding: 25px;
            border: 20px solid transparent;
            border-image: url('https://www.ebingou.cn/biancheng/images/s1.jpg') 30 round;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: Arial, sans-serif;
            color: #2c3e50;
            position: relative;
        }
        
        .design-content {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .design1 {
            background-image: url('https://www.ebingou.cn/biancheng/images/4.jpg');
            background-origin: border-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .design2 {
            background-image: url('https://www.ebingou.cn/biancheng/images/5.jpg');
            background-origin: content-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .design3 {
            background-image: url('https://www.ebingou.cn/biancheng/images/6.jpg');
            background-origin: padding-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .title {
            text-align: center;
            margin: 30px 0 10px;
            color: #2c3e50;
            font-family: Arial, sans-serif;
        }
        
        .description {
            text-align: center;
            margin-bottom: 30px;
            color: #7f8c8d;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1 class="title">代码号CSS实战：background-origin在设计中的应用</h1>
    <p class="description">通过background-origin属性，可以创建出各种精美的边框和背景效果，提升网页的视觉吸引力。</p>
    
    <div class="design-container">
        <div>
            <h3 class="title">边框区域背景</h3>
            <div class="design-box design1">
                <div class="design-content">
                    背景图像从边框区域开始定位，创建独特的边框效果
                </div>
            </div>
        </div>
        
        <div>
            <h3 class="title">内容区域背景</h3>
            <div class="design-box design2">
                <div class="design-content">
                    背景图像从内容区域开始定位，专注于内容展示
                </div>
            </div>
        </div>
        
        <div>
            <h3 class="title">内边距区域背景</h3>
            <div class="design-box design3">
                <div class="design-content">
                    背景图像从内边距区域开始定位，平衡边框和内容
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2. 卡片式布局设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 卡片布局示例</title>
    <style>
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            padding: 40px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #f9f9f9;
        }
        
        .card {
            border: 10px solid transparent;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            background-color: white;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.1;
            z-index: 0;
        }
        
        .card-content {
            position: relative;
            z-index: 1;
        }
        
        .card1 {
            border-image: linear-gradient(45deg, #ff9a9e, #fad0c4) 1;
        }
        
        .card1 .card-bg {
            background-image: url('https://www.ebingou.cn/biancheng/images/1.jpg');
            background-origin: content-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .card2 {
            border-image: linear-gradient(45deg, #a1c4fd, #c2e9fb) 1;
        }
        
        .card2 .card-bg {
            background-image: url('https://www.ebingou.cn/biancheng/images/2.jpg');
            background-origin: padding-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .card3 {
            border-image: linear-gradient(45deg, #ffecd2, #fcb69f) 1;
        }
        
        .card3 .card-bg {
            background-image: url('https://www.ebingou.cn/biancheng/images/3.jpg');
            background-origin: border-box;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .card h3 {
            color: #2c3e50;
            margin-top: 0;
            font-family: Arial, sans-serif;
        }
        
        .card p {
            color: #7f8c8d;
            line-height: 1.6;
            font-family: Arial, sans-serif;
        }
        
        .card-button {
            display: inline-block;
            padding: 8px 16px;
            background: linear-gradient(45deg, #3498db, #2980b9);
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            margin-top: 15px;
        }
        
        .title {
            text-align: center;
            margin: 30px 0 10px;
            color: #2c3e50;
            font-family: Arial, sans-serif;
        }
        
        .description {
            text-align: center;
            margin-bottom: 30px;
            color: #7f8c8d;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <h1 class="title">代码号CSS实战：卡片布局中的background-origin</h1>
    <p class="description">在卡片式布局中，background-origin属性可以帮助创建不同风格的背景效果，增强视觉层次感。</p>
    
    <div class="card-container">
        <div class="card card1">
            <div class="card-bg"></div>
            <div class="card-content">
                <h3>内容区域背景</h3>
                <p>背景图像从内容区域开始定位，专注于卡片内容展示，适合文字较多的卡片设计。</p>
                <a href="https://www.ebingou.cn/jiaocheng/" class="card-button">查看教程</a>
            </div>
        </div>
        
        <div class="card card2">
            <div class="card-bg"></div>
            <div class="card-content">
                <h3>内边距区域背景</h3>
                <p>背景图像从内边距区域开始定位，平衡了边框和内容区域，创建和谐的视觉效果。</p>
                <a href="https://www.ebingou.cn/biancheng/" class="card-button">学习编程</a>
            </div>
        </div>
        
        <div class="card card3">
            <div class="card-bg"></div>
            <div class="card-content">
                <h3>边框区域背景</h3>
                <p>背景图像从边框区域开始定位，创建独特的边框效果，增强卡片的视觉吸引力。</p>
                <a href="https://www.ebingou.cn/yuanma/" class="card-button">获取源码</a>
            </div>
        </div>
    </div>
</body>
</html>

与相关属性对比

background-origin vs background-clip

这两个属性经常被混淆，但它们有本质区别：

background-origin：确定背景图像的起始位置（定位原点）
background-clip：确定背景的绘制区域（裁剪区域）

与background-attachment的关系

当background-attachment设置为fixed时，background-origin属性不会生效，因为固定背景是相对于视口定位的。

本节课程知识要点

理解盒子模型：掌握content-box、padding-box和border-box的概念和区别
属性值应用场景：
- padding-box：默认值，适用于大多数常规背景
- border-box：需要背景延伸到边框下的设计
- content-box：希望背景仅覆盖内容区域的情况
多背景图像处理：可以为多个背景图像设置不同的origin值
浏览器兼容性：现代浏览器都支持此属性，但需注意旧版浏览器的兼容性
与其他属性配合：与background-size、background-position等属性配合使用效果更佳
实际应用技巧：
- 结合边框透明部分创建特殊效果
- 设计卡片、按钮等UI元素时增强视觉层次
- 创建具有深度的背景设计

浏览器支持与注意事项

CSS3属性，现代浏览器均支持
IE9+支持此属性
移动端浏览器支持良好
注意与background-attachment: fixed的互斥性
使用多值时，确保值与背景图像顺序对应

通过掌握background-origin属性，开发者可以更精确地控制背景图像的定位，创建出更具视觉吸引力和专业感的网页设计。

本文标签：

CSS background-origin 属性