CSS background-position属性

一、坐标系及原点

就像CSS的position属性是定位元素一样,background-position属性定位的是背景图片的。他定位的的是由background-image属性定义的背景图片(注意,这里并不是定位由background-color定义的背景颜色)。


它的格式基础模型为:

background-position:xpos ypos;

其中xpos表示x轴(水平位置)方向的坐标,ypos表示y轴(垂直位置)方向的坐标。


学过数学的看官可能有疑问了,既然引出了坐标系,那么它的坐标原点在哪里?


问题的答案是:坐标原点的位置是由background-origin属性控制的。默认情况下,它的原点是拥有该背景图片元素的左上角的padding-box(内边距盒模型)区域。


那么坐标点呢,是背景图的那个部分呢?你猜猜………..


对就是背景的左上角的点。

这里写图片描述
背景图片的坐标点
背景图片的坐标点

图片来源于:http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html](http://www.w3cplus.com/css/a-primer-to-background-positioning-in-css.html

坐标原点右侧xpos的值为正数,左侧为负数;下侧ypos的值为正数,上侧为负数。


二、属性值的类型

background-position属性的值分为三类。

第一类是绝对值类型的值,这里的绝对值并不是数学意义上的绝对值,而是有具体单位的值,比如px、em、rem、ch等单位。
比如:

background-position:50px 30px;
background-position:-10px 20px;
background-position:-10px 2em;

第二类是关键字类型的值。它们有表示水平方向的left、center、right;表示垂直方向的top、center、bottom。
比如:

background-position:top right;
background-position:top center;
background-position:center center;

这里剧透一下,这里的关键字top和left表示相应坐标方向的0%(下面要讲解的第三类值:百分比),center表示50%,bottom和right表示100%。


第三类是百分比类型的值。这里会有一个误解,就是你可能以为这里的百分比表示的是坐标点(背景左上角的点)相对于背景元素大小的百分比的位置

你眼中的位置百分比表示方式

你眼中的百分比位置的表示方式

就像是好的故事总是给人意想不到的结局一样,这里的百分比并不是你意淫的上面的表示方式。

故事要从这里说起:W3C规范是这样说的

A percentage for the horizontal offset is relative to (width of
background positioning area - width of background image). A percentage
for the vertical offset is relative to (height of background
positioning area - height of background image), where the size of the
image is the size given by ‘background-size’

英文不好的我只能借鉴别人的翻译了:

水平百分比的值等于容器宽度(拥有此背景的元素)百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

正确的位置百分比表示方式
(原文翻译及图片出处:http://www.w3cplus.com/css/background-position-with-percent.html

上图中,经过我们人类可以理解的方式解释就是:背景图片相对于自身长度为的75%,宽度为50%的点,和背景容器相对于自身长度为的75%,宽度为50%的点重合。


那么这样的话,我们就可以知道:

  • background-position:50% 50%;是把背景图片放到背景容器的正中央
  • background-position:0% 0%;是把背景图片放到背景容器的左上角(两个左上角的点重合)
  • background-position:100% 100%;是把背景图片放到背景容器的左下角(两个左下角的点重合)
  • ……

三、其他

意犹未尽啊!鉴于狗仔一扒到底的精神,接下来我会继续爆料关于background-position这位明星的一些私人空间。下面是花边新闻:

  • 默认的background-position的值是background-position:0% 0%;

  • background-position属性可以只写一个值。

    比如,background-position:50px;

    那么50px表示水平方向的值,垂直方向的值默认为center。
    相当于

    background-position:50px center;

    background-position:50px 50%;

  • 上面介绍的background-position三种类型的值可以随意组合着写。

    比如:
    background-position:50px bottom;
    background-position:50px 10em;
    background-position:50px 10%;

  • background-position属性的四值模式:可以用关键字top,bottom和left,right改变background-position的定位机制。

    比如:background-position:right 20px bottom 50px;

    表示背景图片距离背景容器右边(right)为20px,距离底边(bottom)为50px

  • 为了适应background-image的多个图片,background-position也可以为多个背景图设置值,用逗号分隔多个值。

    比如: background-position:2px 3px,5px 8px;


四、结语

所谓站在巨人的肩膀上会看得更清楚。上述总结只不过是我查阅网上的一些资料整理加上自己的理解所写。感谢上述引用的网站提供的图片和知识。多谢他们的无私分享。知识在于积累,灵感来源于分享!

原文链接

相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页