背景样式

1. 什么是背景样式

背景样式（background），是W3C规定一个浏览器如何渲染元素的背景层，用户可以在背景层上增加颜色， 图片等效果

内容层：前景内容
背景层：颜色为背景色
背景层就像是地面，而内容层就像地面上的一层布，而你却站在天上看地面。

2. 背景单例型样式

2.1背景颜色（background-color）
背景颜色（background-color）的值常用有三类设置方式
（默认颜色为transparent，可以近似理解为透明）：

	rgb:  字符含义   r→red（红）  g→green（绿）  b: blue（蓝）
	 		 取值范围:rgb(0,0,0)→rgb(255,255,255)		
	rgba：rgba较之rgb多了一个alpha通道用来设置背景透明度，a的取值范围为0~1，
	        （opacity设置整个元素的透明度，背景色rgba设置背景层的透明度）		
	十六进制： #000000~#ffffff(大小写都可,但是要统一)，#aabbcc简写: #abc

背景颜色是延伸到border的下方的,不过只有在border-style不是solid时候才能看出来

2.2背景图片（background-image）
background-image: 初始值为none
background-image：url(“图片地址”);

常用背景图片格式：
	.jpg     不支持动画，不支持透明，渐进显示，颜色丰富，有损
	.png    不支持动画，支持透明度，颜色更丰富，无损
	.gif      支持动画，256种颜色，2种透明度，渐进显示
	.webp 支持动画，高压缩率，高加载速率

背景图片默认也是延伸到border的下方的

2.3背景平铺（background-repeat）

background-repeat: 初始值为repeat;(默认重复)
分解为两个值: background-repeat: repeat-x; background-repeat: repeat-y;

如果不需要背景图片重复显示： 样式值可设置为no-repeat;

备注：如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下

2.4背景大小（background-size）
背景图片缩放：background-size: width height；

数字类样式值：
	百分比：百分比的计算基数为元素的width和height;（是内容区的百分比）
	像素：直接数值; 
		(数值可以写一个或两个,如果只有一个第二个就是默认auto。auto的意思为:按照此时的图片宽度，等比例拉大图片的高度)	
关键字类样式值：
	cover：图片等比缩放直到刚好覆盖背景区域（以最短的宽或高触碰到为准)		
	contain：图片等比缩放,直到有最长的一条边触碰到边框就停止
	
举个例子吧：
	background-size:400px 400px;
    background-size:100%  100%;
    background-size:400px auto;
    background-size:100%  auto;

2.5背景图片显示基点（background-origin）

背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置

content-box: 背景图片内容区左上角开始
padding-box: 背景图片从内边距左上角开始
border-box: 背景图片相当于边框左上角开始

2.6背景图片裁剪区域（background-clip）

当背景图片的源文件大小远大于元素时，那么即便不设置背景图片大小和背景平铺的时候也能够占满元素的所有区域，并且此时还会有部分图片内容超出元素的边缘
背景图片裁剪区域（background-clip）样式的作用就是，在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见

背景图片从开始裁切: background-clip

	content-box: 只显示内容区部分的背景图片
	padding-box:显示内容区和内边距部分的背景图片
	border-box: 显示内容区、内边距和边框部分的图片

2.7背景图片关联依附（ background-attachment ）

背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。

	fixed： 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
	local：	此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
	scroll：此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

overflow样式
在这里就讲一下内容太大该如何处理了
overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理

		overflow：visible;（默认）超出内容正常显示
		overflow：hidden;超出内容隐藏
		overflow：scroll;如果内容比较多，则用滚动条的形式展示多余内容
		overflow：auto;内容未超出，正常显示；内容超出，显示滚动条

3.背景层级

背景图和背景颜色可以同时设置

4. 背景复合型样式

背景是复合属性:
background: color image repeat attachment position/size；
必须按照顺序写，省略的部分可以不写，但是顺序必不能乱
eg：

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；

	省略部分会被默认值替代,
	position和size之间要用/分割，如果只有两个值只是position的值并不是size

5. 多重背景设置

单个元素可设置多个背景图片

background:  url(images/1.png) no-repeat scroll 20px 20px/30px 30px
	, url(images/2.png) no-repeat scroll 20px 20px/30px 30px ；