background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。
注意:当使用 background-attachment 为fixed时,该属性将被忽略不起作用。
属性值
border-box:背景相对于边框放置。
padding-box:背景是相对于填充框定位的。
content-box:背景相对于内容框进行定位。
初始值:padding-box。
浏览器兼容:IE9+
效果一:
.game-intro{
line-height:1.8;
/*白色区域留白*/
padding:30px;
border:20px solid transparent;
background:linear-gradient(white,white) padding-box,no-repeat url(images/bg4.jpg) border-box;
}
效果二:
.demo{
padding: 50px;
border:20px solid transparent;
background:linear-gradient(white,white) padding-box,repeating-linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0 ,#fb3 75%,#58a 0) 0 / 40px 40px;
animation:ants 12s linear infinite;
}
@keyframes ants{
100%{
background-position: 100%;
}
}
背景色只能有一个,所以这里白色背景色是能通过渐变实现的