css怎么设置背景图片的位置?用background-position属性


css怎么设置背景图片的位置?用background-position属性,用英文小写符号:连接background-position属性的值即可,写法如下:

background-position:值;

background-position属性设置设置背景图像的起始位置,这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

当你需要调整背景图片的位置时,只需要修改这个【值】即可,background-position属性的值具体如下:

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
如果您仅规定了一个关键词,那么第二个值将是”center”。

 

默认值:0% 0%。

x% y% 第一个值是水平位置,第二个值是垂直位置。

 

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos 第一个值是水平位置,第二个值是垂直位置。

 

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。

这里有3组值,如乐老师先说简单的x和y值,x就是指水平位置,y就是指垂直位置,你通过设置%(百分比)或者px(像素)这两种单位的值,就可以改变背景图片的位置。

比如把背景图片放到左上角,使用百分比值就是0% 0%,右下角是 100% 100%,以此类推,正中间就是50% 50%,你也可以设置成30% 20%,写法也很简单,举例:

background-position: 50% 50%;

如果是用像素值,也是同样的写法,举例:

background-position: 500px 500px;

也可以混合使用 % 和 position 值,举例:

background-position: 50% 500px;

具体位置需要不同的值,如乐老师就不一一讲解了,同学们自己动手试一试就清楚了。

接下来讲第一组全是英文的值,其实也不难,top就是顶部,left就是左边,center就是居中,right就是右边,bottom就是底部。

以上的词两两组合后,就可以改变背景图片的位置了,如果你只是写了一个值,那么第二个值将是”center”,举例:

background-position: top center;

这样写背景图片就会顶部居中,也可以简写成:background-position: top;

其它的值,同学自己动手试试就清清楚楚了,如乐老师就不啰嗦了。

但是,如果你想使用background-position属性显示下图中红框里面的ISO小图:

需要用background-position属性的负值,详情点击:《css中怎么显示背景图片的某一部分?用background-position属性的负值》。

转载时请注明来源!首发:如乐建站之家
原文链接:
http://www.rulejianzhan.com/css/8074.html

作者如乐老师  如乐老师的QQ:349142701

  如乐老师的微信:349142701

  如乐老师的电话:13189611692

如果你有时间和精力自学,没必要找我帮你建网站,因为我写了快速建站教程,点击下图学习:



鼓励 知识小手