background-position用法详解

本文深入讲解CSS中的background-position属性的详细用法,包括百分比、长度值和关键词三种表示方法,以及它们的具体应用实例,帮助读者掌握背景图像的精确定位技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

background-position详细用法

 background-position的值有三种表示方法,分别有不同的含义:
1)百分比   (容器的内容宽度-背景图片的宽度)*对应的百分比 即为图片要移动的距离    如果您仅规定了一个值,另一个值将是 50%。
2)长度值  如:px 、em、rem等 图片直接在默认位置向左、向下移动对应长度值即可  

      如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。

3)关键词  top/bottom/right/left/center   如果您仅规定了一个关键词,那么第二个值将是"center"。

1、background-position:0 0;等于background-position:left top;(左上角)

2、background-position:100% 100%;等于background-position:right bottom;(右下角)

3、background-position:-70px -40px;(以左上角为0 0点坐标,向左偏移70px,向上偏移40px)

4、background-position:70px 40px;(以左上角为0 0点坐标,向右偏移70px,向下偏移40px)

5、background-position:50% 50%;等于background-position:center center;(居中显示)

6、说明: 
  设置或检索对象的背景图像位置。必须先指定 background-image 属性。
  该属性定位不受对象的补丁属性( padding )设置影响。
  默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
  如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
  对应的脚本特性为 backgroundPosition。

转载于:https://www.cnblogs.com/cui-ting/p/10191199.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值