background:
background-image:背景图片的路径:url("")
background-size:背景图片的尺寸。这里我想详细讲讲尺寸的几种写法
背景图片的大小有两个值,一个值是宽,一个值是高,
一px用像素代表,如果一个值代表宽,浏览器会自动按照原本图片比例计算出高,如果没有按图片原本比例写尺寸,随便写两个值,图片可能失真变形。如果数值代表高,写法为background-size:auto 50px;那么宽度会按照图片原本比例缩放。
二用百分比表示,相对于盒子的大小,
三用cover:会平铺整个盒子,以图片的短边去适应盒子自动缩放
contain:表示以图片的长边去适应盒子自动缩放,可能会有空白;
background-repeat背景平铺,一般设置背景不平埔,background-repeat:no-repeat;如果只想在水平方向平铺,那么为background-repeat:repeat-x;如果只想在垂直方向平铺,那么为background-repeat:repeat-y;
background-positon:背景定位,如果只定义了一个方向的位置,那么另一个默认是center/50%,如果只写一个如background-position:center;那么会使图片左右上下都居中。默认位置是0 0
也可以用英文来表示top right(右上),top left(左上) ,bottom left(左下),bottom right(右下)
如果用百分比表示,如background-position:20%;那么图片宽度的20%位置与盒子宽度的20%位置重合。不建议用百分比,因为并不直观。
下面我们来举几个例子来看看用法;
1 如果想做这样的一个效果,盒子大小为50*50px,背景图片为
图片大小为68px*613px
那么背景的写法应为 background:url("") 0 5px / 50px no-repeat;(原图片中logo左右两边是有距离的,但是上下没有,因此在垂直距离上应该下移)
2如果想实现这样的效果,而背景图片为这里就不需要设置图片的大小,只需要改变位置。
3盒子大小为30px*30px,背景图片大小为564px*62px,首先背景图片距离盒子左边,上边都是有距离的,而且也要另外计算图片的大小,这里可以用到cover,不用计算图片的大小。
background-attachment:fixed;固定图片位置在body中。