CSS3背景，渐变

1，有利于代码维护，有利于使用debug进行调试打断点。
2，后面三个都存在计算，所以分开写最好。
背景复合属性最好的写法，
background:#abcdef url() no-repeat 50px 100px scroll;
background-clip:border-box/padding-box/content-box;
background-origin:border-box/padding-box/content-box;
background-size:cover/contain/length/percentage;

background-color:color/rgb/#000/transparent; 最后一个是透明。
background-image: url();  背景图片
background-repeat:  no-repeat/repeat/x-repeat/y-repeat; 背景重复
background-position: length/%  length/%;  水平位移  垂直位移。此外还有 top center,top right,top left,bottom center,bottom right,bottom left,bottom center,如果只有一个值，left=left center。
background-attachment: scroll/fixed;  跟随滚动条(默认)  固定。
background: #abcdef url() no-repeat 50px 100px scroll;

background-clip: border-box/padding-box/content-box; 背景在哪里开始显示，背景被切到哪里。
background-origin: border-box/padding-box/content-box;相对于background-position以边框(内边距，内容)盒子左上角顶点为圆点进行位置偏移。
background-size:contain;  图片遵循等比例缩放，直到整张图片刚刚在整个div中就立马停（图片和div宽高总有一个相等）
background-size:cover; 图片遵循等比例缩放，直到整张图片刚刚好覆盖整个div就立马停（图片和div宽高总有一个相等）
background-size: 50%;  默认设置两个值：width:50%;  height:auto;。如只设置一个，默认height:auto;  图片的高等比例缩放，并不等于50%，这里50%是相对父元素div的宽度进行计算。
background-size有如下值：
A、length，设置背景图片的高和宽

B、cover，把背景图片扩展至足够大，以使背景图片完全覆盖区域

C、percentage，以父元素的百分比来设置图像的宽度和高度

D、contain，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

A、background-clip指定背景显示的范围  border-box  padding-box  content-box

B、background-size属性指定背景图片的尺寸大小

C、background-origin属性指定背景图片的绘制起点  border-box  padding-box content-box

D、background-position属性是CSS2的，用来定位图片的位置

background-clib: border-box;

A、border-box，背景被剪裁到边框盒

B、padding-box，背景被剪裁到内边距框

C、content-box，背景被剪裁到内容框

border：20px solid transparent;   20px的实线边框是透明的。
            background: url('image/1.jpeg') no-repeat 0px 0px scroll;

　　     background-clip: border-box;    边框，内边距，内容显示背景图 默认值。
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

================================

border：20px solid transparent;   20px的实线边框是透明的。
            background: url('image/1.jpeg') no-repeat 10px 10px scroll;

　　     background-clip: border-box;    边框，内边距，内容显示背景图 默认值。
            background-clip: padding-box;   内边距，内容显示背景图，边框不显示。
            background-clip: content-box;   内容显示内景图，边框和内边距不显示背景图，即内边距是透明的。或者是父元素的背景。

　　　上面图片background-postion:10px 10px; 水平和垂直位移相对于边框盒子，内边距盒子，内容盒子进行定位的：
            background-origin: border-box;    图片相对于边框盒子进行定位
            background-origin: padding-box;  图片相对于内边距盒子进行定位
            background-origin: content-box;  图片相对于内容盒子进行定位

-------------------

background-size:contain;  图片遵循等比例缩放，直到整张图片刚刚在整个div中就立马停（图片和div宽高总有一个相等），不是width留白，就是height高留白，也可能刚刚好覆盖，而不留白。如果图片很小，那么图片的宽会放大到和div的宽一样大，或者是放大图片的高等于div的高。

background-size:cover; 图片遵循等比例缩放，直到整张图片刚刚好覆盖整个div就立马停（图片和div宽高总有一个相等），不留白。不是width溢出，就是height溢出。不过也可能存在刚刚好覆盖整个div不溢出。不是图片的宽等于div的宽，就是图片的高等于div的高。图片基本上都存在溢出，但是也可能刚刚整张图片通过缩放刚刚好覆盖整个div。

background-size: 50%;  默认设置两个值：width  height。如只设置一个，默认height:auto;  图片的高等比例缩放，并不等于50%，这里50%是相对复原度div的宽度进行计算。

background-size: 50% 50%;  这里的百分比是相对父元素div的 width 和 height 而言的。跟上面一个不相等。

background-size:100%; 等于background-size:100% auto; 这里的100%是相对父元素div本身宽度而设定的，即等于图片原始宽度。高度也等于原始高度。

当只设置width一个值时，height的值为：auto。根据宽度等比例缩放，确保不变形。

background-size: 600px; 等于：background-size:600px auto; 这里图片的高度是根据图片大小等比例缩放的。

A、length，设置背景图片的高和宽

B、cover，把背景图片扩展至足够大，以使背景图片完全覆盖区域

C、percentage，以父元素的百分比来设置图像的宽度和高度

D、contain，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

----------------------------------

多张背景图片一般是使用多张png图片在前，其他图片在后，多张图片重合形成一个更好看的效果图。

background-image: url("image/1.gif"),url('image/1.jpeg');  前面一张图片会覆盖后面一张图片

"image/1.gif"  小图

image/1.jpeg    大图

如下图：

=============================================

background: -webkit-linear-gradient(#ff0,#f0f,#fff,pink);
            background:    -moz-linear-gradient(#ff0,#f0f,#fff,pink);
            background:      -o-linear-gradient(#ff0,#f0f,#fff,pink);
            background:         linear-gradient(#ff0,#f0f,#fff,pink);

从左到右渐变，左是开始 ， 右是结束。

begin  表示写开始  ，从左到右，在-webkit-内核中写 left.

end  表示写结束， 从左到右，在-moz-内核中写 right.

to end，从左到右，所以标准写法应该是 to right.   这是标准写法。

-----如下从左到右渐变-------

background: -webkit-linear-gradient(left,#ff0,#f0f,#fff,pink);
            background:    -moz-linear-gradient(right,#ff0,#f0f,#fff,pink);
            background:      -o-linear-gradient(right,#ff0,#f0f,#fff,pink);
            background:         linear-gradient(to right,#ff0,#f0f,#fff,pink);

begin-level  开始水平线   begin-vertical 开始垂直线  即：两线交点就是渐变起点。（适用 -webkit- 内核浏览器）

end-level 结束水平线   begin-vertical  结束垂直线  即：两线交点就是渐变终点（使用 -moz- 和 -o- 内核浏览器）

to end-level  end-vertical  结束点（水平线和垂直线交点） 这是标准写法。

---------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            margin: 0 auto;
        }
        .container{
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        .container>div{
            width: 200px;
            height: 200px;
            /* background: #ff0; */
        }
        .one{
            float: left;
        }
        .two{
            margin: 0 auto;
            display: inline-block;
        }
        .three{
            float: right;
        }
        .one{
            /*上到下渐变。默认从上到下，所以不用写方向。直接写颜色即可*/
            background:   -webkit-linear-gradient(red,yellow,#00f,blue,orange);
            background:      -moz-linear-gradient(red,yellow,#00f,blue,orange);
            background:        -o-linear-gradient(red,yellow,#00f,blue,orange);
            background:           linear-gradient(red,yellow,#00f,blue,orange);
        }
        .two{
            /*左到右渐变。只有webkit浏览器是写开始begin，其他都是写结束end，标准：to end*/
            /*begin/end-direction 开始/结束方向
              webkit 写 begin-direction
              moz 和 o 浏览器都是写 end-direction
              标准写法 to end-direction
            */
            background: -webkit-linear-gradient(left,red,yellow,#00f,blue,orange);
            background:    -moz-linear-gradient(right,red,yellow,#00f,blue,orange);
            background:      -o-linear-gradient(right,red,yellow,#00f,blue,orange);
            background:         linear-gradient(to right,red,yellow,#00f,blue,orange);
        }
        .three{
            /*左上角到右下角渐变*/
            /*begin/end-level 起始/结束点
              webkit 写 begin-level 起始点
              moz 和 o 浏览器都是写 end-level 结束点
              标准写法 to end-level  结束点
            */
            background: -webkit-linear-gradient(top left,red,yellow,#00f,blue,orange);
            background:    -moz-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
            background:      -o-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
            background:         linear-gradient(to bottom right,red,yellow,#00f,blue,orange);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>
</html>

=================以上是线性渐变实例，上到下，左到右，左上角到右下角======================

============================================================================

 角度确定：十字架，上是0deg，顺时针右90deg，下是180deg，左是270deg。
background: linear-gradient(111deg,red,yellow 20%,blue 50%,orange 85%,blue 8%);
/*第一个不写百分比值：默认0%，最后一个不写百分比值：默认100%，如果orange 百分比 小于等于 blue 百分比，渐变线85%之后全部蓝色。如果最后一个blue 百分比 小于 100% 那么 blue 百分比之后的全部都是纯blue，没有渐变,如果语法错误，则恢复默认从上到下渐变。使用角度写渐变不存在兼容性，所以可以使用这个代替所有线性渐变。*/

background: linear-gradient(111deg,rgba(255, 0, 0, 0),rgba(255,0,0,.3) 20%,rgba(255, 0, 0, 1) 80%);
/*Alpha透明度,取值0~1之间。其他语法一毛一样*/

===========================

background:         repeating-linear-gradient(90deg,red,yellow,blue);

重复渐变只在属性前增加了：repeating。其他一毛一样。

==============================================================

-webkit-内核浏览器使用角度渐变的规则：如图上图：X轴，Y轴

1，以X轴正半轴为起始点，逆时针旋转，度数变大。

-moz-,-ms-,-o-内核浏览器使用角度渐变的规则：如图下图：X轴，Y轴

1，以Y轴正半轴为起始点，顺时针旋转，度数变大。

在写代码时，一定要把带-webkit-内核的浏览器样式写在前面如下：

background: -webkit-linear-gradient(top left,red,yellow,#00f,blue,orange);
            background:    -moz-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
            background:      -o-linear-gradient(bottom right,red,yellow,#00f,blue,orange);
            background:         linear-gradient(to bottom right,red,yellow,#00f,blue,orange);

==============================================================

好看的重复渐变：只添加了一个repeating，其他一毛一样。

-webkit-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-moz-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-ms-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-o-background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

　　　 background:         repeating-linear-gradient(90deg,red ,yellow 10%,red 20%);

-webkit-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
   -moz-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
    -ms-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);
     -o-background:         repeating-linear-gradient(90deg,red ,yellow 33px,blue 69px,green 85px,red 117px);

=================

.two{
            /*默认径向渐变*/
            width: 300px;/*width != height时，circle圆形，ellipse椭圆*/
            height: 600px;
            margin: 0 auto;
            margin-top: 100px;
            /*默认div中心就是圆心，默认径向渐变图形为椭圆ellipse*/
            background: -webkit-radial-gradient(red 20%,green 50%,blue 80%);
            background:    -moz-radial-gradient(red 20%,green 50%,blue 80%);
            background:     -ms-radial-gradient(red 20%,green 50%,blue 80%);
            background:      -o-radial-gradient(red 20%,green 50%,blue 80%);
            background:        -radial-gradient(red 20%,green 50%,blue 80%);
        }
        .one{
            width: 300px;/*width=height*/
            height: 300px;
            margin: 0 auto;
            margin-top: 100px;
            /*width=height时，决定了是circle渐变，所以下面设置成ellipse都是没用的。*/
            background: -webkit-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
            background:    -moz-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
            background:     -ms-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
            background:      -o-radial-gradient(ellipse,red 20%,green 50%,blue 80%);
            background:        -radial-gradient(ellipse,red 20%,green 50%,blue 80%);
        }
        .main{
            width: 300px;
            height: 500px;
            margin: 0 auto;
            margin-top: 100px;
            /*完整径向渐变属性如下：
              20% 40%  设置圆心。
              closest-side  ellipse/circle     设置半径为：距离圆心最近的边,进行椭圆/正圆渐变。
              closest-corner  ellipse/circle   设置半径为：距离圆心最近的角,进行椭圆/正圆渐变。
              farthest-side  ellipse/circle   设置半径为：距离圆心最远的边,进行椭圆/正圆渐变。
              farthest-conrner ellipse/circle  设置半径为：距离圆心最远的角,进行椭圆/正圆渐变。
              渐变形状两个值：
              circle   圆形
              ellipse  椭圆

*/
            background: -webkit-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
            background:    -moz-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
            background:     -ms-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
            background:      -o-radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
            background:        -radial-gradient(20% 40%,farthest-corner ellipse,red 20%,green 50%,blue 80%);
        }
        .three{
            width: 300px;
            height: 500px;
            margin: 0 auto;
            margin-top: 100px;
            /*重复径向渐变：repeating-radia-gradient*/
            background: -webkit-repeating-radial-gradient(red 10%,green 20%);
            background:    -moz-repeating-radial-gradient(red 10%,green 20%);
            background:     -ms-repeating-radial-gradient(red 10%,green 20%);
            background:      -o-repeating-radial-gradient(red 10%,green 20%);
            background:        -repeating-radial-gradient(red 10%,green 20%);
        }

HTML背景透明
opacity:0.5;/*这样设置背景颜色为透明，那么里面的字体也会变成半透明*/

background:rgba(255,255,255,0.2);/*这样只设置背景颜色，里面内容不是透明*/
background: transparent; 背景透明，且文字不透明

filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */

-webkit-
   -moz-
    -ms-
     -o-