1.background-position 方案
它允许我们指定背景图像距离任意角的偏移量，只要我们在偏移量前面指定关键字。然而它在默认状态下是这样的：
默认位置：背景图片紧贴左上角
为什么背景图片的位置是边框内呢？
答案是：默认情况下，
background-position 是以padding-box 为准的，这样边框才不会遮盖背景图片。
当我们给它指定偏移量的时候，例如:
background:url(xxx.jpg ) no-repeat #C4D9E6;
background-position: right 20px bottom 20px;
背景图片将被指定到右下角，跟右边缘保持20px的偏移量，跟底边保持20px的偏移量。
*如果只规定了一个关键词，那么第二个值将是"center"。
right 20px bottom 20px
然而，在不支持
background-position属性的浏览器中，背景图片会回到默认位置。会干扰到文字的可读性。于是，需要提供一个回退方案，把 bottom right定位值写到background属性里面。
background:url(xxx.jpg ) no-repeat bottom right #C4D9E6;
background-position: right 20px bottom 20px;
2.background-origin 方案
它规定 background-position 属性相对于什么位置来定位。
语法：background-origin: padding-box|border-box|content-box;
padding:10px;
background:url(xxx.jpg ) no-repeat bottom right #C4D9E6;
background-origin: content-box;
默认情况下，背景图片通过 padding-box 定位，如果把它的值改成content-box，那么图片距离边角的偏移量就跟内边距一样了。
3.calc() 方案
语法：calc() = calc(四则运算)
用于动态计算长度值。
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
在第一种方案中，我们想要把背景图片定位到距离底边20px, 且距离右边20px的位置。如果我们仍然以左上角偏移的思路来思考，起始就是希望它有一个 100%-20px 的水平偏移，以及100%-20px 的垂直偏移。所以我们可以把 calc() 函数在background-position 属性中使用：
background:url(xxx.jpg ) no-repeat #C4D9E6;
background-position: calc(100% - 20px) calc(100% - 20px) ;
*需要注意的是，运算符 "-" 前后都需要保留一个空格，例如：width: calc(100% - 10px)；
实现第一种方案的效果
参考书籍：Lea Verou《CSS揭秘》
网友评论