CSS背景和精灵图

背景颜色：
标签 #id .class { background-color:red; }
取值类型：颜色单词、rgb、rgba、十六进制

背景图片：
标签 #id .class { background-image:url(xxx.png); }
url的取值：本地图片、网络图片
注意：如果图片尺寸 小于 容器标签设置的大小，图片会自动在容器内水平和垂直方向进行平铺填充 (平铺多张此图片)
如果网页上出现了图片，浏览器会再次发送请求获取图片

背景平铺：background-repeat 默认是平铺，可控制不平铺、水平方向平铺、垂直方向平铺
标签 #id .class { background-repeat:repeat; }
取值：
repeat：默认，水平垂直都平铺
norepeat：不平铺
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
应用场景：可以通过背景图片的平铺降低图片的大小，减少不必要的网页下载，增强用户体验效果。
用一张很少纯色的图片平铺整个网页背景、平铺大面积相同背景、平铺导航栏、增强用户体验效果。
：同一个标签可同时设置背景颜色和图片，图片会覆盖颜色。

背景定位属性：用来控制背景图片位置的
background-position:left top; // 默认(左 上)
取值：
具体方向：left center right / top center bottom

具体像素：可接受 负数值
background-position:100px 20px; // 图片距离左边100像素，距离顶部20像素

在一些大型网站中，首页的背景图片都做的很大，重要的部门在中间，用户放大网页时才会显示两边的内容，所以需要设置下在的CSS：
background-position:center top; // (水平居中，顶部不变)
不管你如何放大 缩小网页，总能看到中间重要的部分。

背景缩写：
格式：{background:背景颜色 背景图片 平铺方式 关联方式 定位方式;}
background: green url(img/girl.jpg) no-repeat right bottom;

注意：上面的5个属性都不是必须存在，都可以省略，但顺序不能错。

关联方式background-attachment：当浏览网页时，向下滚动时，背景图片会随着滚动条滚动，滚动出视觉范围。关联方式的作用是把背景图片定位在某一个位置，滚动时，图片不会移动。
格式：
{background-attachment:fixed;} (默认是 scroll 会随着滚动条滚动出界)

背景图片方式和插入图片方式：
1、背景图片仅仅是一个背景，不会占用容器位置。插入图片会占用容器位置。
2、背景图片有定位属性，可以很方便控制图片位置。插入图片没有定位属性，不能控制图片位置。
3、插入图片的语义比背景图片强，如果你的图片想被搜索引擎收录，推荐使用插入图片的方式

CSS精灵图.png

CSS精灵图：很多小图片合成一张大图片
问题：由于一些大型的网页上的的各种小图片成百上千张，浏览器每次要拿一张小图片，都会去请求一次服务器，如果浏览人数较多，会造成服务器的访问量压力巨大。
CSS精灵图作用：减少浏览器请求次数、降低服务器压力。
CSS精灵图，需要配合背景图片和背景定位来使用。