20-css控制背景与css精灵

CSS控制背景
　　背景 background:颜色 图片 平铺方式 固定方式 位置
　　背景颜色 background-color：red；
　　背景图像 background-image：url（背景图像的位置及全称）
　　背景图片的重复方式 background-repeat：[repeat、no-repeat、repeat-x、repeat-y]

　　　　x坐标y坐标[第一个值是水平位置，第二个是垂直位置]左上角0 0。单位是像素（0px 0px）
　　背景图像的位置 background-position：top[left center right]   center[left center right] bottom[left center right]
　　背景图像的依附方式 background-attachment：[scroll、fixed]

　　背景图片，默认情况是进行水平与垂直方向的平铺
　　默认背景图片，在元素的左上角显示
　　背景图片的依附方式：固定的含义是，将图片固定在，屏幕的某一个位置
　　兼容性：IE6只有html与body这两个元素，支持这个属性值。--background-attachment:fixed;
　　让你显得专业一点的技巧：
　　翻转效果：其思路就是，准备两张大小相同，内容不同的图片，正常情况下显示一张，在鼠标经过的时候再显示另一张
　　它叫伪类，表示一种状态
　　:link
　　CSS Sprites（CSS精灵）
　　制作翻转按钮效果的两种方法：
　　第一种：我们需要两张图片，一张正常状态的图片，一张鼠标经过时的图片，做这种按钮思路就是，设置链接a的背景为第一张图片a:hover的背景为第二张图片

　　第二种：将上面两张图片合并成一张图片、设置成按钮的背景，然后，将a:hover的背景向上移动相应的像素即可
　　　　

　　css精灵技巧：主要是为了，减少 http 请求。
　　　　浏览器----服务器（交流）---超市购物---结账时侯。
　　　　优化网页的，http请求次数，提高网页的效率
　　****css精灵的核心思想：就是将多张图片，合并为一张图片，然后通过背景属性中的定位来控制到底显示图片中的哪些部分

　　******如果网页中能选择中的图片，肯定就是插入的图片，选不中，就是背景图片