设置背景的原点
background-origin
语法:
-
padding-box:从padding区域开始显示背景图像 -
border-box:从border区域开始显示背景图像 -
content-box:从content区域开始显示背景图片
设置背景图向外裁剪的区域
background-clip
-
border-box:从border区域向外裁剪背景 —默认值 -
padding-box:从padding向外裁剪背景 -
content-box:从content区域向外裁剪背景 -
text:背景只呈现在文字上
设置背景图的尺寸
background-size
- 指定背景图大小,不允许负值
- 指定背景图百分比大小,不允许负值
-
auto:背景图片的真实大小—默认值 -
contain:将背景图片等比例缩放,将完整背景图片包含于容器内,但注意可能部分区域没有背景图片 -
cover:将图片等比例缩放,直到完全覆盖容器,图片会尽可能显示,但注意背景图片可能显示不完整
背景的复合属性
color url repeat position / size origin clip;
注意:
- origin和clip的值如果一样,如果只写一个值,则origin和clip都设置;如果设置了两个值,前面的是origin,后面的clip
- size的值必须写在position值的后面,并且用/分开
多背景图
用一个复合属性写多个背景图用,隔开