css学习之背景定位

资料

《css揭秘》，w3c

背景定位

background-position：设置背景图像的起始位置

场景1：让背景图片处于右下角

  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-position:right bottom;

场景2：在处于右下角的情况下，距离右侧10px，距离底部20px,修改 background-position

• 方式1

  background-position:right 10px bottom 20px;

• 方式2
  如果我们以左上角偏移的思路来考虑，其实就是希望它有一个 100% - 20px 的水平偏移量，以及 100% - 10px 的垂直
  偏移量。使用calc() ，可以获得同样的效果：

background-position: calc(100% - 10px) calc(100% - 20px);

calc() 函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！这个规则如此怪异，是为了向前兼容：未来，在 calc() 内部可能会允许使用关键字，而这些关键字可能会包含连字符（即减号）。

• 方式3
  在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：偏移量与容器的内边距一致。

padding: 20px 10px;
background-position: right 10px bottom 20px;

代码不够DRY：每次改动内边距的值时，我们都需要在几个地方更新这个值！
有一个更简单的办法可以实现这个需求：让它自动地跟着我们设定的内边距走，不用另外声明偏移量的值。即使用background-origin属性

padding: 20px 10px;
background: url("code-pirate.svg") no-repeat #58a
 bottom right; /* 或 100% 100% */
background-origin: content-box;

但是会发现 background-origin 在 div 等元素中有效果，但在 body 中不起作用，又惊奇，给body父节点html添加背景色之后，background-origin 又有了效果，如下图

后面查找了原因，是因为
应用于body元素的背景是特殊的，因为它会传播到html然后画布：

对于其根元素是HTML HTML元素或XHTML html元素[HTML]的文档：如果根元素上的background-image的计算值为none且其background-color为透明，则用户代理必须改为传播计算的值该元素的第一个HTML BODY或XHTML body子元素的背景属性。该BODY元素的背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定它们。建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素。

总结

整理一下，不至于看了就忘