第 92 期(W3C 标准-CSS-绘制)：background-origin 背景图片绘制参照点

[wingmeng]

CSS3 中的 background-origin 属性可以指定背景图片 background-image 的原点位置基于哪个相对区域。

注意：当使用 background-attachment: fixed 时，该属性将被忽略不起作用。

background-origin 有3个属性值：

• border-box 背景图片以 border 区域为参考基准
• padding-box 背景图片以 padding 区域为参考基准
• content-box 背景图片以 content 区域为参考基准

应用举例：

> 在线 Demo <

<pre class="box">
for (let i = 1; i < 10; i++) {
  if (i % 2 === 0) {
    console.log(1)
  } else {
    console.log(2)
  }
}
</pre>

pre {font-family: consolas; font-size: 13px;}

.box {
  padding: .5em;
  line-height: 1.5;
  background: #d8f7d8;
  background-image: linear-gradient(rgba(0,0,0,.1) 50%, transparent 0);
  background-size: auto 3em;
  background-origin: content-box;
}