CSS背景图片位置

利用 background-position属性可以改变图片在背景中的位置。

写法:

background-position: x y;

参数代表的意思是:x坐标和y坐标。可以使用方位名词或者精确单位。

方位名词

方位名词有:top 、bottom、left、right、center

写法:

background-position: top left;

这个意思就是图片的位置在左上角。

参数是方位名词的注意点:

  1. 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top和 top left效果一致,都是说明左上角。
  2. 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐。

精确单位

写法:

background-position: 20px 50px;

这个意思就是图片的位置距离最上面20像素,距离左边50像素。(x轴20px y轴50px)

参数是精确单位的注意点:

  1. 如果参数值是精确坐标,那么第一个肯定是x坐标,第二个定是y坐标
  2. 如果只指定一个数值,那该数值定是x坐标,另一个默认垂直居中

混合单位

写法:

background-position: 20px center;

这个意思就是图片的位置距离最上面20像素,左边居中对齐。(x轴20px y轴靠左居中对齐)

参数是混合单位的注意点:

  1. 如果指定的两个值是精确单位和方位名词混合使用,则第个值是x坐标,第二个值是y坐标

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

邮箱地址不会被公开。

微信