html盒子背景图片路径,背景图片从盒子的哪个位置开始平铺？

问题：背景图从盒子的哪个位置开始平铺？

实际应用：在移动端，有许多的小的精灵图都被设置了a链接，为了提高用户的体验，a链接被点击的范围应该大一些。那么这个问题就涉及到了背景图的平铺问题。(pink颜色代表需要被点击的盒子的范围)

如何使得JD从盒子中间开始平铺，而且周围的精灵图不会影响到它？

解决：这个问题涉及到CSS3的两个属性：

属性background-origin：设置背景摆放起点

/* padding-box为默认值，背景图片摆放从padding开始，包括区域padding和content*/

background-origin: padding-box;

/* border-box背景图摆放从border开始，但是会被border给覆盖(除非border设置为transparent)*/

background-origin: border-box;

/* content-box背景摆放从内容区左上角开始(右边或者下边可能会超出内容区范围) */

background-origin: content-box;

注意问题：上面所指的摆放只是确定了起始位置，而图片的结束位置则是在border区域结束，如下所示：

平铺结束位置为border

现在我们知道了背景可以从内容区开始摆放，但是图片结束的位置不符合我们的要求，因为它延伸到了border区域，这时我们就需要另外一个属性了。

属性background-clip:设置元素的背景(背景图片或颜色)是否延伸到边框下面

/* border-box为默认值，即border及border区域内的背景图均可显示 */

background-clip: border-box;

/* padding-box意思为只有padding和content区域的背景能够显示t*/

background-clip: padding-box;

/* content-box意思为只有content区域的背景能够显示 */

background-clip: content-box;

有了上面的两个属性我们的问题就可以被解决了！

背景图从content开始，背景图和背景颜色都只在content内显示！

背景图从content开始，背景图和背景颜色都只在content内显示！