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精灵的核心思想：就是将多张图片，合并为一张图片，然后通过背景属性中的定位来控制到底显示图片中的哪些部分
******如果网页中能选择中的图片，肯定就是插入的图片，选不中，就是背景图片
原文地址：https://www.cnblogs.com/xiang-liang/p/12545492.html