CSS手册

3. CSS背景

1. 颜色

body {background-color:#b0c4de;}

• 十六进制 - 如："#ff0000"
• RGB - 如："rgb(255,0,0)"
• 颜色名称 - 如："red"
• 默认transparent透明
• 从父元素继承inherit;

2. 图像背景 background-image

①.图像 url

body {background-image:url('paper.gif');}

• 水平方向平铺 background-repeat:repeat-x;
• 不平铺 background-repeat:no-repeat;
• 设置背景图像的起始位置 background-position:right top;
• 简写属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

• 背景颜色 background-color
• 指定一个固定的背景图像：background-attachment:
  1.fixed 背景图片不会随着页面的滚动而滚动。
  2.scroll 默认背景图片随着页面的滚动而滚动
  3.local 背景图片会随着元素内容的滚动而滚动

②. linear-gradient 创建一个线性渐变的 "图像"(从上到下)

/*direction渐变方向，渐变起止颜色*/
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/*透明度rgb*/
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

③. radial-gradient() 函数用径向渐变创建 "图像"。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

• shape 确定圆的类型:ellipse 默认 指定椭圆形的径向渐变; circle ：指定圆形的径向渐变
• size 定义渐变的大小 farthest-corner (默认) 指定径向渐变的半径长度为从圆心到离圆心最远的角;
  closest-side ：从圆心到离圆心最近的边;closest-corner ：从圆心到离圆心最近的角;farthest-side ：从圆心到离圆心最远的边
• position 定义渐变的位置 圆心的纵坐标值。center,top,bottom.

radial-gradient(red 5%, green 15%, blue 60%);
radial-gradient(circle, red, yellow, green);
radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);

④ repeating-linear-gradient() 函数创建重复的线性渐变 "图像"。

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
/*angle渐变角度方向，side水平(left 或 right)，cornor垂直（top 或bottom）*/
repeating-linear-gradient(90deg, red, blue 7%, green 10%);

⑤. repeating-radial-gradient(red, yellow 10%, green 15%);