前面的话
在css2.1中, 如果想对容器的某个角对背景做偏移定位,我们只能指定距离左上角的偏移量,或者干脆完全靠齐到其他三个角。
例如:
background-position: 50px 20px; 向右移50px,向下移20px.
background-position: right bottom; 右下角
background-position: left bottom; 左下角
如果我们想图片与容器的边角之间能留出一定的空隙(假如距离右下角有10px的空隙),使用css2.1比较麻烦。需要计算出背景图片距离左上角的偏移量,然后再把计算结果给background-position。如果当容器的尺寸不固定时,这时就不可能做到了。
如何解决这个问题呢?下面介绍3种方法background-position的扩展语法、background-origin方案、calc()方案。
background-position的扩展语法
background-position的扩展语法允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字。
例如:
让背景图片跟右边缘保持20px的偏移量,同时跟底边保持10px的偏移量。
div {
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position:right 20px bottom 10px;
}
background-origin方案
有时,我们会碰到这样一种情况:偏移量与容器的内边距一致。如果采用上面的background-position扩展方法,代码是这样的:
padding: 10px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a;
background-position:right 10px bottom 10px;
这样的代码不够DRY:每次改动内边距的值时,我们需要改动三个地方。我们有更简单的方法来实现。
定义与用法
我们来看看w3c是怎样定义background-origin属性的:
background-origin属性属性规定 background-position 属性相对于什么位置来定位。
语法
background-origin: padding-box|border-box|content-box;
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
了解background-origin属性之后,那么如何使用这个属性来改善上面的代码?
在默认情况下,background-position属性时以容器的padding-box来定位的,我们只需要改变属性值为content-box,使背景从内容盒子开始定位,自然就不会遮挡容器的padding部分。
padding: 10px;
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a right bottom;
background-origin: content-box;
calc()方案
calc()方法又是如何实现背景定位的呢?
我们还是将背景图片定位到距离底边10px且距离右边20px的位置。如果我们任然以左上角偏移的思路来思考,其实就是一个100% - 20px的水平偏移量,以及100% - 10px的垂直偏移量。
刚刚好calc()函数允许这样的运算,可以完美的在background-position属性中使用:
background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat #58a ;
background-position: calc(100% - 20px) calc(100% - 10px);