background-position属性怎么用

2024-01-17 15:44 小编

     CSSbackground-position属性

 

  作用:设置背景图像的起始位置。

 

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

 

  语法:

 

  background-position:xy;

 

  x表示水平位置,y表示垂直位置;x和y有多种赋值方式,下面我们来看看x,y可能的值:

 

  值 描述

 

  lefttop

 

  leftcenter

 

  leftbottom

 

  righttop

 

  rightcenter

 

  rightbottom

 

  centertop

 

  centercenter

 

  centerbottom 如果仅指定一个关键字,其他值将会是"center"

 

  x%y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。。默认值为:0%0%

 

  xposypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions

 

  注:需要把background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作。

 

  CSSbackground-position属性的使用示例

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <metacharset="utf-8">

 

  <style>

 

  body

 

  {

 

  background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

 

  background-repeat:no-repeat;

 

  background-attachment:fixed;

 

  background-position:center50px;

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  </body>

 

  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码