background-position

本文详细介绍了CSS中的background-position属性,包括其语法、属性值及使用方法。解释了如何使用方位名词和精确单位来定义背景图片的位置,并通过示例展示了不同参数组合的效果。

■ 定义

background-position属性用于定义图片在背景中的位置

■ 使用说明

语法:

background-position: x y;

属性值:

  x:x坐标,水平方向

  y:y坐标,垂直方向

x(水平方向)和y(垂直方向)都使用方位名词或者精确单位

□ 方位名词

方位名词有以下两类:

  ▶ 水平方位:left center right

  ▶ 垂直方位:top center bottom

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一样

如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

□ 精确单位

精确单位值由以下类别:

  ▶ 百分数

  ▶ 由浮点数字和单位标识符组成的长度值

如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标

如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

□ 参数是混合单位

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

示例

background-position:20px center;  /* x坐标是20px,y是center */
background-position:center 20px ; /* x坐标是center,y是20px */
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值