(一)、背景颜色 属性:background-color 取值:任何合法颜色或者transparent 注意:背景颜色会填充到元素的内容区域以及边框区域 (二)、背景图像 作用:以图象作为元素的背景 属性:background-image 取值:url(背景图像路径) (三)、背景重复 属性:background-pepeat 取值: 1.repeat 默认值,水平垂直方向都平铺 2.repeat-x 仅在水平方向平铺 3.repeat-y 仅在垂直方向平铺 4.no-pepeat 不平铺
属性:background-size 取值: 1.value1 value2 指定背景图像的宽度和高度,以px为单位 2.value1% value2% 采用当前元素的框和高的百分比作为背景图像大小 3.cover 将背景图像等比放大,直到背景图完全覆盖到元素的所在区域为止 4.contain 将背景图等比放大明知道背景图像的下边或者右边有一个边缘碰到元素为止
属性:background-attachment 取值: 1.scroll 滚动,默认值,背景图会随着文档而滚动 2.fixed 固定,背景图不会随着页面文档而发生滚动,一直保持在可视化区域中的固定位置处。
作用: 改变背景图像在元素中的默认设置 属性: background-position 取值: 1.x y x:背景图像水平偏移距离,取值为正,向右偏移,取值为负,向左偏移 y:背景图向垂直偏移距离,取值为正,向下偏移,取值为负,向上偏移 2.x% y% 0% 0%:背景图在元素的左上角 50% 50%:背景图在元素的中间 100% 100%:背景图在元素的右下角 3.关键字 x:可以被left/center/right取代 y:可以被top/center/bottom取代
background-position:center; //水平和垂直都在中间位置处 background-position:left top; //背景图在左上方 background-position:top right; //背景图在右上方雪碧图、精灵图 作用: 将一些小的背景图,合并到大的背景道中去,以便实现减少服务器端的请求次数 步骤: 1.根据要看的图像大小,创建一个元素 2.将雪碧图作为元素的背景图,再通过背景图像位置实现位置偏移,将用户要看的图像,显示在元素中。