Page 54 - css揭秘

对于具有固定尺寸的容器来说，使用 CSS 2.1 来做到这一点是可能的，
但很麻烦：可以基于它自身的尺寸以及我们期望它距离右下角的偏移量，计
算出背景图片距离左上角的偏移量，然后再把计算结果设置给 background-
position。当容器元素的尺寸不固定时（因为内容往往是可变的），这就不
可能做到了。网页开发者通常只能把 background-position 设置为某个接
近 100% 的百分比值，以便近似地得到想要的效果。如你所愿，借助现代的
图 2-10
CSS 特性，我们已经拥有了更好的解决方案！
background-position: bottom
right; 通常不会产生在审美上让
background-position 的扩展语法方案 人非常舒服的结果，因为图片跟
容器的边缘之间没有空隙
在 CSS 背景与边框（第三版）（http://w3.org/TR/css3-background）中，
background-position 属性已经得到扩展，它允许我们指定背景图片距离任
意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背
景图片跟右边缘保持 20px 的偏移量，同时跟底边保持 10px 的偏移量，可以
这样做（结果如图 2-11 所示）：

background: url(code-pirate.svg) no-repeat #58a; 图 2-11
background-position: right 20px bottom 10px; 我们可以指定距离其他各边的偏
移量；为了更清楚地看到偏移是
最后一步，我们还需要提供一个合适的回退方案。因为对上述方案来 怎么工作的，背景图片的外圈加
说，在不支持 background-position 扩展语法的浏览器中，背景图片会紧 了一层虚线框
贴在左上角（背景图片的默认位置）。这看起来会很奇怪，而且它会干扰到
文字的可读性（参见图 2-12）。提供一个回退方案也很简单，就是把老套的
bottom right 定位值写进 background 的简写属性中：

background: url(code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
图 2-12
试一试 play.csssecrets.io/extended-bg-position 如果我们不希望旧版浏览器的用
户看到这个结果，还需要指定一
个回退方案
background-origin 方案

在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移
量与容器的内边距一致。如果采用上面提到的 background-position 的扩
展语法方案，代码看起来会是这样的：

padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;

我们可以在图 2-13 中看到结果。如你所见，它起作用了，但代码不够 图 2-13
对背景图片应用的偏移量往往跟
DRY：每次改动内边距的值时，我们都需要在三个地方更新这个值！谢天谢
内边距的值正好一致

3 灵活的背景定位 23

඀ࠡ JOEC