background-origin 属性 | 开创者教程

实例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-origin属性的用法</title>
    <style>
        .example1 {
            background-image: url('/uploads/20250507/deer.png');
            background-repeat: no-repeat;
            background-position: left;
            background-origin: padding-box;
            background-size: 80px;
            padding: 20px;
            border: dashed 10px rgba(0,0,0,.5);
            margin-bottom:20px;
        }
        
        .example2 {
            background-image: url('/uploads/20250507/deer.png');
            background-repeat: no-repeat;
            background-position: left;
            background-origin: border-box;
            background-size: 80px;
            padding: 20px;
            border: dashed 10px rgba(0,0,0,.5);
            margin-bottom:20px;
        }
        
        .example3{
            background-image: url('/uploads/20250507/deer.png');
            background-repeat: no-repeat;
            background-position: left;
            background-origin: content-box;
            background-size: 80px;
            padding: 20px;
            border: dashed 10px rgba(0,0,0,.5);
        }
    </style>
</head>

<body>
    <h1>background-origin属性的用法</h1>
    <div class="example1">
        <strong>padding-box（默认值）</strong>：这个值表示背景图像会从元素的内边距(padding)区域开始绘制。在这个例子中，你可以看到小鹿图标是从虚线边框的内侧开始显示的。因为背景图像不会延伸到边框下方，所以边框的虚线样式可以完整地展示出来。这种设置是最常用的，特别适合大多数常规布局需求，当你希望背景图像与边框保持一定距离时特别有用。注意背景图像的位置计算会从padding边缘开始，而不是从边框外边缘开始。
    </div>
   <div class="example2">
        <strong>border-box</strong>：这个值表示背景图像会从元素的边框(border)区域开始绘制。在这个例子中，你可以清楚地看到小鹿图标是从虚线边框的外边缘开始显示的，背景图像延伸到了边框下方，部分被虚线边框遮挡。这种设置适合一些特殊设计需求，比如当你希望背景图像完全覆盖整个元素（包括边框区域）时。需要注意的是，如果边框是半透明的，背景图像会透过边框显示出来，可以创造出独特的视觉效果。
    </div>
   <div class="example3">
        <strong>content-box</strong>：这个值表示背景图像仅从元素的内容(content)区域开始绘制。在这个例子中，你可以观察到小鹿图标是从文字内容区域开始显示的，跳过了内边距和边框区域。这种设置适合一些特殊排版需求，比如当你希望背景图像只出现在内容区域内部时。因为背景图像不会填充padding区域，所以会在内容和边框之间留下空白，这种效果在某些精致的设计中很有用。
    </div>
</body>

</html>