CSS3背景与渐变

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% );