CSS 背景
背景和字体一样，是一个复合属性，且使用频率很高。CSS3 中，背景在保持以前用法的同时，增加了新的相关属性。
CSS 可以添加背景颜色、背景图片以及用来进行图片设置。以下为常用的 CSS 背景样式：
[1] 背景颜色 background-color
background-color 接受所有合法的颜色，还可以接受一个使背景透明的关键字。背景颜色不能继承，其默认值是 transparent。如果一个元素没有指定的颜色，那么背景就应当是透明的，这样其祖先元素的背景才能可见。
|
1 2 3 4 5 6 |
值: <color> | transparent | inherit 初始值: transparent background-color:<color> 例,background-color:#ff0000; 或 rgba(255,0,0,0.5); background-color:transparent; // 默认值 |
[ 背景半透明 ] CSS3 中，支持背景半透明的语法格式为：
背景半透明是指盒子背景半透明，而盒子中的内容不受影响。同样，可以给文字和边框设置半透明，语法相同。
[2] 背景图片 background-image
background-image 会放在所指定的背景颜色之上。不过对于有 alpha 通道的图像格式，如 PNG，可能会部分或完全透明，这会导致图像与背景色结合。另外，如果出于某种原因无法加载图像，背景色会取代图像。
|
1 2 3 4 5 |
background-image:<bg-image>[,<bg-image>]* <bg-image>:<image> | none 引入图片（值）：<url> | none（默认） | inherit url(../images/x.png) 例，background-image:url(red.png),url(blue.png); // 先写的在上面，后写的在下面 background-color:green; // 背景颜色始终在最底层 |
[3] 背景平铺 background-repeat
|
1 2 3 4 5 |
background-repeat:[,<repeat-style>]* 可以对应多张图片 <repeat-style>=repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} repeat（初始值），即x轴又y轴 space，平铺的同时，图片间有间隙（等分且正好容下） round，平铺的同时，拉伸（正好容下，有拉伸） |
背景图像默认从一个元素的左上角 padding-box 开始平铺，但其从各个方向朝外面平铺，包括 border 区域。
[注意] space 和 round 这两个新增属性值 firefox、safari 和 IE9- 浏览器不支持。
[注意] 背景平铺可以写空格间隔的两个值，分别代表横轴值和纵轴值，但这种写法 IE8- 浏览器不支持。
[4] 背景定位 background-position // 滑动门技术？！
|
1 2 3 4 5 6 7 8 9 |
<positon>=[left | center | right | top | bottom | <percentage> | <length>] // 说明：length，可以是关键字、百分比等；图片的百分比与容器的百分比对应重合； | [left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] X轴位置 Y轴位置 | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ] 以中间或左右为参照物，偏移距离或百分比 // 默认值为：0%，0% // 必须先指定 background-image 属性 |
[ 推荐写法 ] CSS2.1 中，背景定位只支持以左上角为参照进行定位，在 CSS3 中新增了可以选择参照方向的定位。
|
1 2 3 |
background-image:url(red.png); background-repeat:no-repeat; background-position:right 10px top 20px; // 第一个、第三个参数为要参照的方向，第二个和第四个参数为偏移值。 |
- 关键字（方位名词） // 对于单一关键字，当某一方向的关键字为 center 时可省略
- x轴— left:图的左侧和元素左侧对齐 / center:图的中间和元素中间对齐 / right:图的右侧和元素右侧对齐
- y轴— top:图的顶部和元素顶部对齐 / center:图的中间和元素中间对齐 / bottom:图的底部和元素底部对齐
- 具体值 // 页面左上角为原点(0,0)点；背景图像移出到元素范围外的部分不显示
- x轴：正值从左向右移动，负值从右向左移动
- y轴：正值从上向下移动，负值从下向上移动
- 百分比 // 如果只指定一个值，该值将用于横坐标，纵坐标将默认为为 50%；第二个值将用于纵坐标。
- x轴：背景图像的 x% 对应元素的 x%
- y轴：背景图像的 y% 对应元素的 y%
[5] 背景关联 background-attachment // 又叫背景附着，设置背景图像是随对象内容滚动还是固定
|
1 2 3 4 5 6 7 8 9 10 11 |
background-attachment:<attachment>[,<attachment>]* // 可多个,与图片一一对应 <attachment>=scroll(默认值) | fixed | local scroll：默认值，背景图像随对象内容滚动。也就是说，背景图片会随着页面其余部分的滚动而移动。 但如果它自己是可以滚动的元素，背景图不会随元素内容的滚动而滚动(默认值)。 fixed：较少使用，以整个窗口作为参照物，背景图像固定。 原图像不会随文档滚动，且原图像的放置由可视区的大小确定，而不是由包含该图像的元素的大小或在可视区中的位置决定。 在浏览器中，随着用户调整浏览器窗口的大小，可视区可能会改变。这会导致背景的原图像随着窗口大小的改变移动位置。 所以，某种意义上说，图像并不是固定的，它只是在可视区大小不改变的情况下保持固定。 // IE6-浏览器无法处理非body元素上的固定关系 local：背景、内容一起动。也就是说，背景图片会随着页面其余部分的滚动而移动。 与scroll的区别在于，即使它自己是可滚动的元素，背景图也会随元素内容的滚动而滚动。 // local属性值IE8-浏览器不支持。 |
[6] 背景原点 bacnground-orgin // 决定背景图像的显示区域；IE8- 浏览器不支持
background-origin 主要用来决定背景定位属性的参考原点，即决定背景图片定位的起点。
在默认情况下，背景图片的背景定位属性总是以元素左上角为坐标原点对背景图片进行背景定位，而背景原点属性可以根据自己的需求来改变背景图片的背景定位起始位置。
|
1 2 3 4 5 6 7 8 9 10 11 |
background-origin:<box>[,<box>]* box = border-box | padding-box（默认值） | content-box border-box: 决定背景定位起始位置从border的外边缘开始显示背景图片 padding-box: 默认值，决定背景定位起始位置从padding的外边缘开始显示背景图片 content-box: 决定背景定位起始位置从content的外边缘开始显示背景图片 例， background-image:url(red.png); background-repeat:no-repeat; background-origin:padding-box; // 如果将background-attachment设置为fixed，background-origin将不起任何作用 |
[7] 背景裁切 background-clip 语法同 background-origin
默认值为 border-box，也就是其他地方裁剪不显示。
[注意] IE8- 浏览器不支持
|
1 2 3 4 5 |
background-clip: border-box || padding-box || content-box 在webkit内核下支持text属性 -webkit-background-clip: text; 配合-webkit-text-fill-color: transparent;的属性可以使文字颜色呈现背景图像的效果。 |
[8] 背景尺寸 background-size // IE8- 浏览器不支持
background-size 背景尺寸，又称背景缩放，用于设置背景图片的尺寸，在移动端开发中做屏幕适配应用十分广泛。
|
1 2 3 4 5 6 7 8 9 10 11 |
<background-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain auto: 默认值，将保持背景图片的原始高度和宽度。 <length>: 取具体的整数值。 <percentage>: 取百分比，相对于元素的宽度和padding的总和来计算。 cover: 自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏。但这种方法会致使背景图片失真。 常与background-position: center配合来制作满屏背景效果。缺点是需要制作一张足够大的背景图片，否则在较大分辨率浏览器下会使背景图片失真。 contain: 保持背景图像本身的宽度比例，将背景图像缩放到宽度或高度正好适应所定义背景容器的区域，保证图片始终完整显示在背景区域。 // 当背景尺寸属性为固定数值或百分比值时可以设置两个值，也可以设置一个值。 // 只取一个值时，指定了背景图片的宽度，第二个值相当于auto，也就是指定了高度。在这种情况下，auto值设定之后能够让背景图片的高度自动地按照比例缩放。 |
背景图能自适应元素盒子大小，实现与模块大小完全适应的背景图，避免因区块尺寸不同而需设计不同的背景图。
- 在流体布局或者响应式布局中，确保背景图像能够始终适配容器大小；
- 对于平铺的重复性背景图像，可以确保背景图像不会有截断效果；
- 在流体布局中缩放背景图像来伪造出多列分栏效果；
- 解决 Retina 屏幕双倍像素下背景图像模糊问题；
- 使用链接或者列表元素的背景图像能和文本一起进行缩放。
[9] 多背景 background // IE8- 浏览器不支持
在使用 CSS3 之前，每个容器只能指定一张背景图像，因此每当需要增加一张背景图像时，必须至少添加一个容器来容纳它。使用伪元素显示附加图片其实就是嵌套 HTML 标签实现多背景图像的变身，通过 :after 和 :before 等伪元素生成附加元素来放置背景图像，表面上比直接嵌套 HTML 标签更干净一些，但其实是换汤不换药。
[ 多背景图片 ] 通过CSS3的多背景属性，HTML标记就不需要任何修改，在CSS的background-image或者background属性中列出需要使用的所有背景图像，用逗号分隔开，且每张图片都具有background中的属性。
CSS3多背景有层次之分，按照浏览器中显示时图像叠放的顺序从上到下指定，最先声明的背景图像将会居于最上层，最后指定的背景图像将置于最底层。除了背景颜色之外，其他的属性都可以设置多个属性值，前提是元素有多个背景图像存在。对于不兼容多背景的浏览器来说，多背景属性写在单一背景属性的后面，而且还要确保这张单一背景图像确实可用。这是处理兼容CSS3多背景特性兼容的常用方案。
|
1 2 3 4 5 6 7 8 9 |
background: [background-image] | [background-color] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip],* [ 推荐写法 ] background:背景颜色 背景图片 背景平铺 背景滚动 背景位置 // 若background在background-origin和background-clip中仅存在一个值，则该值为background-clip； // 若存在两个值，则前面为background-origin，后面为background-clip。 // 注意：所有背景属性都不能继承。 |
背景渐变
在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今，已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变（ radial-gradient？！）两种。
[ linear-gradient() 线性渐变？↓ ] // 渐变的兼容性问题很严重，了解线性渐变即可