CSS3 background-origin 属性

实例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-origin 属性示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1 {
    color: #333;
    text-align: center;
  }
  
  .example-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
  }
  
  .example-box {
    flex: 1;
    min-width: 300px;
    border: 15px solid rgba(0, 0, 255, 0.3);
    padding: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="yellow"/><circle cx="35" cy="40" r="5" fill="black"/><circle cx="65" cy="40" r="5" fill="black"/><path d="M30 70 Q50 85 70 70" stroke="black" stroke-width="3" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-size: 50px;
    margin-bottom: 20px;
    position: relative;
  }
  
  .example-label {
    position: absolute;
    top: -25px;
    left: 0;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
  }
  
  #border-box {
    background-origin: border-box;
  }
  
  #padding-box {
    background-origin: padding-box;
  }
  
  #content-box {
    background-origin: content-box;
  }
  
  .description {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    margin-top: 30px;
  }
</style>
</head>
<body>

<h1>background-origin 属性演示</h1>
<p>这个属性定义了背景图像的定位区域，即背景相对于哪个框进行定位。</p>

<div class="example-container">
  <div class="example-box" id="border-box">
    <span class="example-label">border-box</span>
    <p>背景图像相对于边框盒定位。图像会显示在边框下方。</p>
  </div>
  
  <div class="example-box" id="padding-box">
    <span class="example-label">padding-box (默认)</span>
    <p>背景图像相对于内边距盒定位。图像不会延伸到边框。</p>
  </div>
  
  <div class="example-box" id="content-box">
    <span class="example-label">content-box</span>
    <p>背景图像相对于内容盒定位。图像只出现在内容区域。</p>
  </div>
</div>

<div class="description">
  <h3>说明：</h3>
  <ul>
    <li><strong>border-box</strong>: 背景图像相对于边框盒定位</li>
    <li><strong>padding-box</strong>: 背景图像相对于内边距盒定位（默认值）</li>
    <li><strong>content-box</strong>: 背景图像相对于内容盒定位</li>
  </ul>
  <p>注意：所有示例使用了相同的透明蓝色边框和黄色笑脸SVG背景图像，以便清晰比较不同属性的效果。</p>
</div>

</body>
</html>