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

1.cursor属性 鼠标指针放在一个元素边界范围内时所用的光标形状

• url 需使用的自定义光标
• default 默认光标
• auto 默认浏览器设置的光标
• crosshair 十字线
• pointer 一只手
• move 指示某对象可被移动。
• e/s/n/w/ne/nw/se/sw-resize 矩形框的边缘可向某方向移动
• text 指示文本
• wait 指示程序正忙 沙漏
• help 指示可用的帮助 问号或者气球

2. overflow属性

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow-x/y属性

1. overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域
2. overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域

visible,hidden,scroll,auto

• no-display 如果内容不适合内容框，则删除整个框
• noontent 如果内容不适合内容框，则隐藏整个内容