背景图原点
-
background-origin ：padding-box; (默认)
border-box | padding-box | content-box
-
background-origin是用来决定图片的原始起始位置。
-
它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示。
背景图裁剪
-
background-clip
border-box | padding-box | content-box
-
background-clip的作用为将背景图片做适当的裁剪，以适应需要。
-
background-clip有content- box,padding-box,border-box，text几个值剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。
背景图大小
-
background-size
length： 长度值---第一个值设置宽度，第二个值设置高度
percentage： 百分比---第一个值设置宽度，第二个值设置高度
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
多重背景
-
background-image：CSS3允许您为元素使用多个背景图片
-
background-image: url('1.jpg),url('2.jpg') ... 使用逗号把图片分开
-
元素引入多个背景图片，前面图片会覆盖后面的图片