css 之background (三)

background-repeat: repeat-x | repeat-y | [repeat | no-repeat | space | round]{1, 2}
一个例子:

 .demo {
        width: 100px;
        height: 100px;
        background-clip: padding-box;
        background-origin: content-box;
        padding: 20px;
        border: 20px dashed antiquewhite;
        background-repeat: repeat-x;
        background-image: url('./dog.jpg');
        background-size: 50px 40px
    }

image.png
背景图片的起点由background-origin确定,但是实际的绘图区域由background-clip确定;可以看到背景图片水平方向铺满了padding-box
space与round属性看文档我暂时也没想明白,由于兼容性问题,有时间再研究吧

background-attachment: scroll (default) | fixed | local

fixed属性表示背景图像相对于主视口固定,但只有当容器出现在视口中时才会显示背景图像

我的一个例子

理解:
这里有两个视口,一个主视口(浏览器窗口),一个自身视口;
scroll: 当主视口滚动时,背景图片滚动;当自身视口滚动时,背景图片不滚动;
fixed: 背景图片均不滚动;
local: 背景图片均滚动;
一个例子:

        <div class="local">
            <div class="child"></div>
        </div>
        <div style="height: 1600px"></div>

    .local {
        width: 400px;
        background-image: url(./dog.jpg);
        background-repeat: no-repeat;
        background-attachment: local;
        height: 500px;
        overflow-y: scroll
    }

    .child {
        height: 600px;
    }

background-color: transparent | <color>
background-image: none | <image>

• background-image的优先级比background-color高
• 可以设置多组背景图片
• 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上(指定的第一个图像最接近用户)

系列到这里就结束了,前文链接:
css 之 background (一): 背景与盒模型之间的关系
css 之background (二): 背景图像的尺寸与定位

github上的完整代码
喜欢的话点个赞吧~