背景属性+渐变

一、背景属性

分类 ： 纯色背景（背景颜色） 背景图像

1.背景颜色
background-color ： 任意合法的颜色 和 transparent

2.背景图像
background-image ： url（） URL图片路径

3.背景图像平铺
background-repeat： 值为如下

background-repeat	背景图像平铺
repeat	默认值水平垂直方向都平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
no-repeat	不平铺

4.背景图片的尺寸

background-size	背景图片的尺寸
background-size： value1 value2	宽度 和 高度 单位 是PX
background-size： value% value%	宽度 和 高度 单位 是%
cover	全覆盖 将背景图等比放大直到背景图完全覆盖到元素的所有区域
contain	包含 将背景图等比放大 ，直到下边或者右边有一个边缘碰到元素为止

5.背景图片固定
background-attachment: fixed;取值如下
scroll：滚动
fixed 固定

6.背景定位
改变背景图像在元素中的默认位置
属性 ：background-position：x y

x：水平偏移距离
y：垂直偏移距离
单位 ： px % top left right bottom

7.CSS中的 雪碧图、精灵图
作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。
步骤：
1.我们根据图像的大小创建一个元素
2.将雪碧图作为元素的背景，再通过背景图片定位，实现位置偏移将用户要看到的图像显示在元素中

复合写法

background:#FFFFFF url(背景图路径) no-repeat 0px 0px ;
背景颜色 背景图片 是否重复 背景图片定位

8.文本对齐方式
vertical-align: middle; 文字与图片垂直中部对齐

	扩充如下：
		middle：与元素中部对齐。
		sub：字下沉。
		super：字上升。
		text-top：文本顶部对齐。
		text-bottom：文本底部对齐。
		top：和本行位置最高元素对齐。
		bottom：和本行位置最低元素对齐

二、渐变

两种或者多种颜色间平滑度过的效果

1.分类：

	1.线型渐变
	2.径向渐变
	3.重复渐变  加上  repeating

2.渐变的组成

	色标：决定了渐变的每种颜色及出现的位置
	每个渐变效果都是由多个色标组成（2个以上）

linear-gradient() 线型渐变
语法：background-image：linear-gradient（方向或者角度，色标。。。。。）

			 		angle 方向或者角度
			 				to top  从下往上填充  
			 				to left  从右往左
			 				to right  从左往右
			 				to bottom  从上到下
			 				0   == 0deg（度）  ==to top
			 				90deg  = toright
			 				180deg  = to bottom
			 				270deg = to left
			 				color  颜色

radial-gradient()径向渐变
语法：background-image：radial-gradient（size at position 色标。。。。。）
size at position 径向渐变的位置以及圆心的位置
size ： 圆的半径 单位为px
position ： x，y 圆心的位置
px % top/left/center/bottom
色标
例如：
background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);