CSS background-position属性

CSS 专栏收录该内容
7 篇文章 0 订阅

background-position可以用于设置背景图像的位置。主要有以下三类:

1、关键字:

    center、top、left、bottom、right。如果只写了一个值,那么第二个值默认为center。比如 background-position:top;和background-position:top center;是等价的。

2、百分比:

    background-position:x% y%。第一个值是水平距离,第二个是垂直距离。左上角: 0% 0%,右下角 100% 100%。如果只指定了一个值,那另一个值默认为50%。

    而关于用百分比来设置图像,有一点比较特殊的是,百分数值同时应用于元素和图像,也就是说图像中描述为50%  50%的点(中心点)与元素描述为50%  50%的点(中心点)对齐。

    假如background-position:30% 60%; 也就意味着元素上距离左边30% 上边60%的点应该与图像上同样的点重合。

3、长度值

    长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

    background-position:20px 30px;也就表示图像的左上角距离元素左边向右偏移20px,距离上边向下偏移30px

  • 0
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值