《css揭秘》--【3】背景图片的定位

灵活的背景定位

对容器的背景图片进行定位你可能想到使用background-position设置，例如下面：

    width: 200px;
    height: 200px;
    border: 1px solid #00BCD4;
    background:url(1.png) no-repeat transparent;
    background-position: right bottom;

效果如下：

但是，我们有时候希望图片和容器的边角之间能留有一定的空隙（类似于内边距的效果），这时如何实现呢？

1.background-position扩展语法方案

background-position扩展语法允许我们指定背景图片的距离任意边的偏移量，举例来说，如果想让背景图片跟右边距离20px偏移量，跟底边距离10px偏移量，可以这样写： background-position:right 20px bottom 10px,其他的不变。效果如下：

2.background-origin方案

在给背景图片设置距离某个边的偏移量时，有一种情况很常见，就是偏移的距离是内边距设置的大小。实现上面的效果可以这样写：

    width: 200px;
    height: 200px;
    border: 1px solid #00BCD4;
    background:url(1.png) no-repeat transparent bottom right;/* 或100% 100% */
    padding: 0 20px 10px 0;
    background-origin: content-box;

注：

1. 可以结合background-position一起设置使用；
2. 介绍一下background-origin:

定义：指定background-image属性的原点位置 属性值如下：

• padding-box:背景图片的摆放以padding区域为参考
• border-box:背景图片的摆放以border区域为参考
• content-box:背景图片的摆放以content区域为参考

3. calc()方案

calc()函数允许我们执行一些运算，直接在background-position中使用：

    width: 200px;
    height: 200px;
    border: 1px solid #00BCD4;
    background:url(1.png) no-repeat transparent;
    background-position: calc(100% - 20px) calc(100% - 10px);

注：calc()函数内部的 - 和 + 运算符的两侧各加一个空白符，否则会产生解析错误！

ok,就到这里吧！^__^