background-position
2019-08-26 本文已影响0人
McDu
描述:背景图片水平和垂直起点,默认值:0% 0%,即起点是在 padding-box
(你也可以用 background-origin
改成 border-box
或 content-box
) 的左上角。可设百分比,也可设 px,正值会向正向偏移(以左上角为起点,往右 往下是正方向,同理,往左 往上是反方向)。50% = center 关键字
。
css3 中增强了该属性,将两值扩展为四值。如 background-position: left 10px top 10px;
前两个代表水平方向,后两个代表垂直方向。这样起点就不局限于左上角,可以是右上角、右下角、左下角。
如果想定位到右下角,还有一种方式,结合 calc
同样可以实现:
background-position: calc(100% - 20px) calc(100% - 10px);