CSS 背景(background)

css背景图片和插入图片的区别
背景属性，给页面元素添加背景样式
能设置不同的背景图片位置

背景颜色color

background-color:颜色值; 默认的值是 transparent 透明的

背景图片image

background-image : none 或者 url: (图片路径)
none（无背景图，默认的）
url（使用绝对或相对地址指定背景图像）

背景平铺（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

背景位置(position)

background-position : length || length
background-position : position || position
length（百分数 | 由浮点数字和单位标识符组成的长度值）
position（top | center | bottom | left | center | right 方位名词）
注意：
必须先指定background-image属性
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed
scroll（背景图像是随对象内容滚动）
fixed（背景图像固定）

背景简写

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top;

背景透明(CSS3)

background: rgba(0, 0, 0, 0.3);
第四个值是 alpha 透明度 取值范围 0~1之间
我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

背景渐变色

background-image: **linear-gradient(90deg,red,green,blue,yellow,hotpink );
可以添加多个颜色 用逗号隔开每个键值对
如果需要调整渐变的角度 可以添加一个 0~360deg 角度值在前面
background-image:radial-gradient (c**ircle ,red,green,blue,yellow,hotpink );**角度在中心向外圆形渐变
circle 可以添加 at left top 来调整角度
background-image:radial-gradient (ellipse** ,red,green,blue,yellow,hotpink )** 角度在中心向外椭圆形渐变 盒子需要是长方形才可以**

背景图大小设置

background-size: 宽px 高px；
如果只设置宽，高会等比例的缩小或放大
background-size:cover;
根据父盒子的大小进行等比例缩放，不管是宽度还是高度都必须铺满整个盒子才停止缩放，会溢出父盒子。
background-size:contain
根据父盒子的大小进行等比例缩放，不管是宽度还是高度其中一边铺满就会停止缩放，不会溢出父盒子
background-position:center;
调整图片位置

多重背景

我们背景图后面还可以在跟一个背景。
background: url(ldh.jpg) no-repeat,url(site-logo.png) repeat-x right bottom;
注意：多背景图的一个展示关系是： 先引入的背景图会压住后引入的背景图