CSS3中背景属性background-origin

2019-03-22536次阅读csscss3

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%;
    }
}

背景色只能有一个,所以这里白色背景色是能通过渐变实现的

上一篇: CSS中背景属性background-position  下一篇: firefox火狐浏览器源代码自动换行的方法  

CSS3中背景属性background-origin相关文章