背景定位

背景定位

background定位只能指定距离左上角的偏移量，或者完全靠齐到其他三个角。

1、css3 background-position扩展语法方案：允许指定背景图片距离任意角的偏移量，指定偏移量前面指定的关键字。例如：

background:url(****.svg) no-repeat #58a;

background-position:right 20px bottom 10px;

在不支持background-position扩展语法的浏览器中，背景图片会紧贴在左上角。会干扰文字的可读性，提供一个回退方案也简单，就是把老套的bottom right定位值写进background的简写属性中：

background:url(****.svg) no-repeat bottom right #58a;

background-position:right 20px bottom 10px;

2、background-origin方案：让背景自动跟着设定的内边距走，不用另外声明偏移量的值。每个元素存在三个矩形框：border box、padding box、content box。默认情况下background-position是以padding box为准的，这样边框不会遮住背景图片。如果值改为content-box，在background-position属性中使用的边角关键字将会以内容区的边缘作为基准。

padding:10px;

background:url(****.svg) no-repeat bottom right #58a;

background-origin:content-box;

3、calc()方案：

background:url(****.svg) no-repeat bottom right #58a;

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