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-boxspace与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上的完整代码
喜欢的话点个赞吧~
