CSS第二弹

一，元素背景

背景分为纯色背景（背景颜色）和背景图像

1.背景颜色代码为：
background-color
列：


2.背景图像代码为：
background-image ： url（可插入任何图片地址）

3.背景图像平铺：
background-repeat：

		repeat  ： 默认值水平垂直方向都平铺
		repeat-x：水平方向平铺
		repeat-y：垂直方向平铺
		no-repeat：  不平铺

4.背景图片的尺寸
background-size：（宽、高px/%）
cover : 全覆盖 将背景图等比放大直到背景图完全覆盖到元素的所有区域
contain：包含 将背景图等比放大 ，直到下边或者右边有一个边缘碰到元素为止
以上列：

这是不平铺，单设置背景图的效果!

设置了平铺尺寸等属性之后之后

这只是部分案例，相比大小不同的图片，在元素中呈现的效果不一样

5.背景图片固定
background-attachment:

						scroll：滚动
						 fixed： 固定

6.背景定位
background-position：（x轴） （y轴）
改变用于背景图像在元素中的默认位置，单位有 ：
px ， % ， top ， left ， right ， bottom

一般用于雪碧图（就是多种图标集于一张图片的图），方便减少服务器的请求次数

二、渐变

所谓渐变就是两种或两种以上的颜色间平滑度过的效果

分类：

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

线型渐变：
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

列：


我这里没有设置颜色比例分布，所以是平均分布的

径向渐变：
background-image: radial-gradient（）；

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

线型渐变重复：


径向渐变重复：