第六章 背景样式详解
1 什么是背景样式
背景样式（background），是W3C规定一个浏览器如何渲染元素的背景层，用户可以在背景层上增加颜色， 图片等效果。
2 背景单例型样式
2.1 背景单例型样式之背景颜色（background-color）
背景颜色（background-color）的值常用有三类设置方式（默认颜色为transparent，可以近似理解为透明）：
颜色的单词如red,blue,yellow
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的下方的。
2.2 背景单例型样式之背景图片（background-image）
background-image: 初始值为none
background-image：url(“图片地址”);
常用背景图片格式：
.jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损
.png 不支持动画，支持透明度，颜色更丰富，无损
.gif 支持动画，256种颜色，2种透明度，渐进显示
.webp 支持动画，高压缩率，高加载速率
2.3 背景单例型样式之背景层级
背景样式的渲染层级
背景图和背景颜色可以同时设置
2.4 背景单例型样式之背景平铺（background-repeat）
background-repeat: 初始值为repeat;(默认重复)
分解为两个值:
background-repeat-x:repeat;
background-repeat-y:repeat;
写法二:
background-repeat: repeat-x;
background-repeat: repeat-y;
如果不需要背景图片重复显示：
样式值可设置为no-repeat;
备注：如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下.
2.5 背景单例型样式之背景大小（background-size）
背景图片缩放：background-size: width height；
数字类样式值：
百分比：百分比的计算基数为元素的width和height;
像素：直接数值;
(数值可以写一个或两个,如果只有一个第二个就是默认auto)
关键字类样式值：
cover：图片等比缩放直到刚好覆盖背景区域
contain：图片等比缩放,直到有一条边触碰到边框就停止
长边长，则余长
宽边长，则余宽
cover全部填充，contain填充完一边则停。
2.6 背景单例型样式之背景图片显示基点（background-origin）
背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置。
•content-box: 背景图片内容区左上角开始
•padding-box: 背景图片从内边距左上角开始
•border-box: 背景图片相当于边框左上角开始
2.7 **背景单例型样式之背景图片裁剪区域（**background-clip）
背景图片从开始裁切: background-clip
content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片
border-box: 显示内容区、内边距和边框部分的图片
当背景图片的源文件大小远大于元素时，那么即便不设置背景图片大小和背景平铺的时候也能够占满元素的所有区域，并且此时还会有部分图片内容超出元素的边缘
背景图片裁剪区域（background-clip）样式的作用就是，在背景图原始尺寸大于元素的时候讲图片进行裁剪，保证背景图片在哪个区域可见。
2.8 背景单例型样式之背景图片关联依附（ background-attachment ）
fixed：此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local：此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll：此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
2.9 overflow样式
overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理。
overflow：visible;（默认）超出内容正常显示
overflow：hidden; 超出内容隐藏
overflow：scroll; 如果内容比较多，则用滚动条的形式展示多余内容
overflow：auto;内容未超出，正常显示内容超出，显示滚动条
3 背景复合型样式
3.1 背景复合型样式写法
背景是复合属性
background: color image repeat attachment position/size；
eg： background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
省略部分会被默认值替代, position和size之间要用/分割
4 多重背景设置
单个元素可设置多个背景图片
background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px
url(images/1.png) no-repeat scroll 20px 20px/30px 30px ；