第 92 期(W3C 标准-CSS-绘制):background-origin 背景图片绘制参照点
wingmeng opened this issue · comments
Wing Meng commented
CSS3 中的 background-origin
属性可以指定背景图片 background-image
的原点位置基于哪个相对区域。
注意:当使用
background-attachment: fixed
时,该属性将被忽略不起作用。
background-origin
有3个属性值:
border-box
背景图片以 border 区域为参考基准padding-box
背景图片以 padding 区域为参考基准content-box
背景图片以 content 区域为参考基准
应用举例:
<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;
}