background背景的写法

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中。

猜你喜欢

转载自blog.csdn.net/lxhby520/article/details/80147550