背景原点
-
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
clip原意为裁剪，截取。
background-clip的作用为将背景图片做适当的裁剪，以适应需要。
background-clip有content- box,padding-box,border-box三个值
剪裁方法：根据设置的盒子部位，那么图片在这个部位的
外边缘以外的部分都会不可见。
- background-size:
length： 长度值---第一个值设置宽度，第二个值设置高度
percentage： 百分比---第一个值设置宽度，第二个值设置高度
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
背景渐变
线性渐变：linear-gradient
劲向渐变：radial-gradient
background:-webkit-linear | radial-gradient (水平起点 垂直起点 || 角度, 颜色1 0%, 颜色2 渐变到的位置百分比%, ... ,颜色N 100%);
background:radial-gradient(at 55px 55px, #fff 1%,#000 100%);
background:-webkit-radial-gradient(50px 50px,#fff 1%,#000 100%);
background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);
background:-webkit-linear-gradient(top,#000 0%,#fff 36%,#000 100%) ;
蒙版
/*可以使用图片或渐变作为遮罩层*/
-webkit-mask-image:url | gradient
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content
简写：-webkit-mask:url("04.png") 40px 55px no-repeat;
