css3背景，蒙版，渐变

一、CSS3背景

1、背景原点控制（background-origin ：padding-box; (默认)）

border-box | padding-box | content-box
background-origin是用来决定图片的原始起始位置

它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示。

2、背景剪切控制（background-clip ）

    1).border-box | padding-box | content-box
    clip原意为裁剪，截取。
    background-clip的作用为将背景图片做适当的裁剪，以适应需要。
    background-clip有content- box,padding-box,border-box三个值
    剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。
2).background-clip & background-origin

图片起始位置是从border-box开始，但background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。

3、背景尺寸（background-size）

    1).length：长度值---第一个值设置宽度，第二个值设置高度
    2).percentage：百分比---第一个值设置宽度，第二个值设置高度
    3).cover：等比缩放到完全覆盖容器，背景图像有可能超出容器

4).contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

4、透明背景（rgba）
background:rgba(255,0,0,0.6)

background-color:rgba(255,0,0,0.6); RGB Red Green Bule 3色!即255, 0, 0 三色的值混合.最后一个参数.0.6 则是指的透明度!1为100% 不透明!

二、渐变背景

1、渐变种类

线性渐变：linear-gradient

径向渐变 radial-gradient

2、语法：
    渐变：background:-webkit-linear | radial-gradient (水平起点垂直起点 || 角度, 颜色1 0%, 颜色2 渐变到的位置百分比%, ... ,颜色N 100%);
    线性渐变&&径向渐变
    -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
    例如：
background:radial-gradient(at 55px 55px, #fff 1%,#000 100%);

background:-webkit-radial-gradient(50px 50px,#fff 1%,#000 100%);

-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

例如：background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);

注：在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

三、蒙版

1、蒙版知识点

1).可以使用图片或渐变作为遮罩层

-webkit-mask-origin:border | padding | content

简写：-webkit-mask:url("04.png") 40px 55px no-repeat;

目前只有webkit浏览器支持mask遮罩层

2、WEB中mask属性特点

形状主要控制的是显示区域
颜色对蒙版没有任何的影响

透明度为显示图像的透明度

css3背景，蒙版，渐变

猜你喜欢