遮罩层渐变css,CSS3蒙版、渐变、背景

背景原点

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;