10_css控制背景与css精灵.txt

CSS控制背景
1.背景 background:颜色 图片 平铺方式 固定方式 位置
2.背景颜色 background-color:#ccc;
3.背景图片 background-image:url(背景图像的位置及全称)
4.背景图像的平铺方式 background-repeat:repeat/no-repeat/repeat-x/repeat-y
5.背景图像的位置 background-position:top/center/bottom left/center/right
x y //第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素(0px 0px)
6.背景图片的依附方式 background-attachment:scroll/fixed

注意：背景图片的依附方式中的值fixed在IE6中不支持。
解决方法是IE6中HTML和BODY两个元素支持fixed这个值，
所以要在IE6中让图片在屏幕某个位置不动，就得在HTML或BODY中设置background-attachment:fixed;

background-position的两种设置方式：
background-position:center center;
background-position:100px 100px;

-------------------------------

css精灵

制作翻转按钮效果的两种方法：
1.我们需要两张图片，一张正常状态的图片，一张鼠标经过时的图片，
这种按钮思路就是，设置链接a的背景为第一张图片，a:hover的背景为第二张背景图片

2.将两张图片合成一张图片，将这张在图片设置成背景，
然后将a:hover的背景向上移动相应的像素即可。background-position

css精灵是用来优化网页的，因为可以减少http请求次数，提高网页效率。

css精灵的核心思想，就是将多张图片，合成一张图片，
然后通过背景属性中的定位来控制到底显示图片中的哪些部分。