CSS3背景
背景图片区域：background-clip属性
- 概念：指定背景绘制区域
- 语法：background-clip: boder-box(默认值) | pdding-box | content-box
background-clip: border-box; // 背景被裁剪到边框
background-clip: padding-box; // 背景被裁剪到内边距
background-clip: content-box; // 背景被裁剪到内容框
背景图片定位：background-origin属性
- 概念：设定元素背景图片的原始起始位置
- 语法：background-origin: boder-box | pdding-box | content-box
background-origin: border-box; // 背景图片从border-box的最左上角起始
background-origin: padding-box; // 背景图片从padding-box的最左上角起始
background-origin: content-box; // 背景图片从content-box的最左上角起始
好文链接：background-position 用法详细介绍
背景图片大小：background-size属性
- 概念：指定背景图片的大小
- 语法：background-size: length | percentage | cover | contain
background-size: contain; // 将背景图片等比例缩放至某一边紧贴容器边缘为止
background-size: cover; // 将背景图片等比例缩放以填满整个容器
background-size: 800px 500px; // 背景图片的宽度是800px，高度是500px
background-size: 800px; // 相当于800px auto，背景图片的宽度是800px，高度等比例缩放
background-size: 50% 50%; // 背景图片的宽度/高度都是容器的50%
background-size: 50%; // 相当于50% auto，背景图片的宽度是容器宽度的50%，高度等比例缩放
background-size: 100% 100%; // 背景图片的宽度/高度都是容器的100%
background-size: 100%; // 相当于100% auto，背景图片的宽度是容器宽度的100%，高度等比例缩放
多重背景图片：background-image属性
- 概念：为元素使用多个背景图片
- 语法：background-image: url(img1.jpg), url(img2.jpg)
background-image: url('bg2.png'), url('bg1.jpg');
// bg2.png会覆盖bg1.jpg
背景属性整合：background属性
- 概念：在一个声明中设置所有的背景属性
- 语法：background:color position size repeat origin clip attachment image
background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');
// 经验之谈，还是建议以这种形式来写
background: #abcdef url('bg1.jpg') no-repeat center center;
background-size: 50%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
CSS3渐变
渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。
线性渐变：linear Gradients属性
- 概念：是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变(从一边拉向另一边)
- 语法：background: linear-gradient(direction, color-stop1,color-stop2,...)
// 从上到下(默认)，可以省略方向
background: -webkit-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: linear-gradient(red, blue);
// 从左到右
background: -webkit-linear-gradient(left, red , blue);
background: -moz-linear-gradient(right, red, blue);
background: -o-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue); // 标准写法，建议使用
// 对角
background: -webkit-linear-gradient( left top, red, yellow, blue);
background: -moz-linear-gradient( right bottom, red, yellow, blue);
background: -o-linear-gradient( right bottom, red, yellow, blue);
background: linear-gradient(to right bottom, red, yellow, blue); // 标准写法，建议使用
// 使用角度（方向）
background: -webkit-linear-gradient(135deg, red, yellow, blue);
background: -moz-linear-gradient(135deg, red, yellow, blue);
background: -o-linear-gradient(135deg, red, yellow, blue);
background: linear-gradient(135deg, red, yellow, blue);
deg.png
// 颜色节点(均匀分布)
background: -webkit-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background: -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background: -o-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
// 颜色节点(按比例分布)
// 如果第一个不写值，默认0%
// 如果最后一个不写值，默认100%
// 从0到10%是红色，10%到15%是红色到橙色的过渡，以此类推
background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%);
// 颜色节点(使用透明)
background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
// 中间第50%的位置，透明度是0.6，建议这种方式来控制透明度的渐变
background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background: -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
background: linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.6), rgba(255, 0, 0, 1));
// 线性渐变
background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%);
径向渐变：linear Gradients属性
- 概念：从起点到终点颜色从内向外进行圆形渐变(从中间向外拉)
- 语法：radial-gradient(center, shape size, start-color , ... , last-color);
// 颜色结点均匀分布（默认情况）
background: -webkit-radial-gradient(red, blue);
background: -moz-radial-gradient(red, blue);
background: -o-radial-gradient(red, blue);
background: radial-gradient(red, blue);
// 颜色结点不均匀分布
// 0%到50%是红色，50%到70%是红色到蓝色的渐变，70%到100%是蓝色
background: -webkit-radial-gradient(red 50%, blue 70%);
background: -moz-radial-gradient(red 50%, blue 70%);
background: -o-radial-gradient(red 50%, blue 70%);
background: radial-gradient(red 50%, blue 70%);
// 设置形状
// radial-gradient(shape, start-color , ... , last-color);
// circle：圆形，ellipse：椭圆（默认）
// 如果元素的宽高一样，那参数shape无论设置为circle还是ellipse，显示效果都是圆形
background: -webkit-radial-gradient(circle, red, blue);
background: -moz-radial-gradient(circle, red, blue);
background: -o-radial-gradient(circle, red, blue);
background: radial-gradient(circle, red, blue);
// 设置尺寸
// radial-gradient(size, start-color , ... , last-color);
// closest-side：最近边，渐变的终点是最近的一条边
// farthest-side：最远边，渐变的终点是最远的一条边
// closest-corner：最近角，渐变的终点是最近的一个角
// farthest-corner：最远角，渐变的终点是最远的一个角
background: radial-gradient(closest-side, red, blue);
background: radial-gradient(farthest-side, red, blue);
background: radial-gradient(closest-corner, red, blue);
background: radial-gradient(farthest-corner, red, blue);
// ...兼容性处理省略...
// 设置圆心位置
// radial-gradient(center, shape size, start-color , ... , last-color);
// 圆心位置(x轴的30%，y轴的70%)
background: radial-gradient(30% 70%, closest-side circle, red, blue);
background: radial-gradient(30% 70%, farthest-side circle, red, blue);
background: radial-gradient(30% 70%, closest-corner circle, red, blue);
background: radial-gradient(30% 70%, farthest-corner circle, red, blue);
// 注意shape和size之间是用空格隔开的
// 重复渐变
background: -webkit-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -moz-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: -o-repeating-radial-gradient(red 0%, blue 10%, red 20% );
background: repeating-radial-gradient(red 0%, blue 10%, red 20% );
