background之你不知道的background-position

时间 2019-11-09

原文原文链接

这是一个有趣的话题

其实我并不确切的平时你们是怎么去应用或者玩转一个属性，一个值。我能确定的是这些东西都有很多的可玩性。优化

我今天要聊的 background-position 应该已经被你们玩得色彩斑斓了。尤为是 CSS Sprites流行的这些年，background-position 基本上是被应用最多的属性之一。ui

重拾旧趣

咱们知道 background-position 是用来指定背景图像的偏移值的，能让一张图从特定的位置开始展示。而 CSS Sprites 就是经过将多个小图拼接成一张大图，而后利用 background-position 来指定须要显示的区域，以此达到合并HTTP请求的预期。url

一个足够简单的应用

为了回顾 background-position 的应用，接下来我将会用一个最简单的例子来代入，这里有一张由2个 300*100px 垂直拼接而成的图片做为背景图，如图0：翻译

图0：简单的文字图片three

我如今须要图0 在2个并排的div中分别显示不一样的部分：图片

HTML:

<div class="part1"><!-- 显示图0上半部分 --></div>
<div class="part2"><!-- 显示图0下半部分 --></div>

因而我写了段简单的CSS，以下：ci

CSS:

div {
    width: 300px;
    height: 100px;
    background: gray url(../test.png) no-repeat;
}
.part1 {
    background-position: 0 0;
}
.part2 {
    background-position: 0 -100px;
}

很显然我能够获得预期，效果如图1：get

图1：简单的CSS Sprites应用it

这就是最典型的 CSS Sprites 使用场景。io

默认值

因为 background-position 的默认值是 0% 0%，那么上述的CSS代码其实能够优化成：

.part2 {
    background-position: 0 -100px;
}

由于 .part1 指定的值是 0 0，和默认值相同，因此能够省略。你会发现，对一个属性了解得更多，就更能帮助你写出简洁的代码。

百分比

我并不能肯定你们是否使用过 background-position 的百分比，这里就权当你们对此并不甚了解。

试着使用百分比去实现上个例子

我相信确定有童鞋会这样写：

.part2 {
    /* background-position: 0 -100px; */
    background-position: 0 -50%;
}

按照通常的思惟，上述两行代码应该是等价的，不是么？在开篇的时候咱们就说了背景图图0 的高度是 200px，那么 -50% 正好是 -100px。

不用着急，咱们会用实际的例子来验证这个结果

图2：参照尺寸验证

结果让人有点忧伤，这和咱们的设想有点出入，这是为何呢？

追本溯源

咱们都知道一个百分比值，必然会须要有一个参照尺寸。举个例子来说，假设我定义一个元素的宽度是 50%，那么这个元素的具体宽度就是：包含块宽度 * 50%。

因此，若是你须要使用百分比做为 background-position 的值，必须清楚它的参照尺寸是什么。

w3c 是这样描述 background-position 比分比值的：

原文：refer to size of background positioning area minus size of background image.

翻译：参照指定背景区域的尺寸减去背景图片的尺寸

这是什么意思呢？白话一点说：background-position 的百分比值参照的是设置背景的区域减去背景图的尺寸。

再出发

按照这个思路，咱们将：

.part2 {
    background-position: 0 -50%;
}

换算一下将会获得：

.part2 {
    background-position: 0 50px;
}

换算过程为：(设置背景的区域高度 - 背景图的高度) * -50%，即：(100 - 200) * -50% = 50px

这就解释了 Demo2 为何会获得图2 的效果。但这显然并非咱们想要的，咱们预期的效果是图1。

根据上述的公式，咱们能够逆推预期效果的百分比值是多少：

-100 / (100 - 200) = 100%

因此若是你要使用百分比，那么定义应该是这样的：

.part2 {
    background-position: 0 100%;
}

这会终于获得咱们的预期效果了，请看图3

图3：百分比的正确预期效果

了解了百分比的这个特性后，会帮助咱们大大简化某些定义，好比我在 Yo 里面对 yo-score 的处理，很是巧妙，有兴趣的童鞋能够本身研究一下，这里不细讲。

另外：须要注意的是百分比值会受 background-size 影响，由于 background-size 能够改变背景图像的大小。

多值

在 CSS3 中，对 background-position 属性进行了扩展，容许接受3到4个参数，用于指定背景图的起始方向和具体位置。

原文：If three or four values are given, then each <percentage> or <length> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given.

翻译：若是指定了三个或四个值，那么每一个 <percentage> 或 <length> 以前必须有一个关键字，用于指定该方向的偏移量。

当指定3到4个参数时，不接受 center 关键字做为偏移量做为边界，只能使用 top, right, bottom, left 这4个关键字。

多值的意义

在此前，咱们使用 background-position 只能让背景图从 top, right, bottom, left, center 这5个边界开始显示，但没法指定任意一个边界的偏移量。

举个例子：我想让一个背景图从右下角偏移 20px

你会发现若是没有多值扩展，你很难轻易作到这件事，除非你能肯定容器的宽高永远都是显式定义好的，就算如此，其灵活性也一文不值。

多值的应用

若是利用多值特性，这将变得很是轻松，咱们仍使用图0 做为背景图，来作一个演示。

.demo {
    width: 400px;
    height: 400px;
    background: url(../test.png) no-repeat;
    background-position: right -300px bottom 20px;
}

这会终于获得咱们的预期效果了，请看图4

图4：背景图多值应用

实际上，有了多值以后，咱们可让背景图在任意方位上偏移，你可能会发现，这甚至可让你的结构写得更简单，嵌套变浅。

写在最后

当你深刻了解了每一个属性的每一个定义，你的CSS世界又会变得和之前不同。enjoy it.