设置背景图片_如何控制背景图片的起点

设置背景图片初始点

在使用背景图片，或许会遇到背景图片位置偏移的问题，但其实这是背景图片没设置好初始点引起的问题。

background-origin是css3中引入的元素背景相关的属性，中文名为背景图片起点，他主要是设置背景图片位置的起始点。如下所示，不同的初始点，背景图片就会有不一样的位置。

图片位置各不一样

01

语法

控制背景图片初始点

backgorund-origin：类型；

这个类型共有三个值可以选：border-box、padding-box(默认值)、content-box。

关于这三个值的解释，得引出盒模型这个概念。

当我们欣然的接过快递小哥送来的包裹时，就会迫不及待的打开包裹，首先我们会打开包装，这个包装就是border-box区域。

如果我们买的东西是易碎品，那么我们会看到包裹内的防压泡沫板，这个就是padding-box区域。

而在最里边的我们的心爱之物就是content-box区域。

想象成快递包

在CSS中，border-box区域的大小是由border属性控制的，padding-box区域的大小是由padding属性控制的，content-box区域的大小是由实际内容区域大小控制的。

回到background-origin这个属性上来，它的三个值就好理解了。在CSS中页面的渲染性格是由页面左上角开始的，那么

· border-box就是把背景图片的坐标原点设置在盒模型border-box区域的左上角

· padding-box就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角

· content-box就是把背景图片的坐标原点设置在盒模型content-box区域的左上角

那遇到背景图片偏移的问题，就知道怎么回事了！

初始点不同，图片位置也不同

知识导图