认识CSS的background（六）

马黑黑 · 发表于 2024-3-13 08:07

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-13 11:54 编辑

本节继续讨论 background-position 属性。如下演示，background-position我们设置为 bottom right，等同于 100% 100%，但是，背景图片并没有紧贴元素的右边和下边，这和我们在前面的章节中所得到的印象不一样。

本元素内边距设定 padding: 16px;
本元素边框设定 border: 6px dashed rgba(0,0,0,.5);
本元素的背景图像设定 background-position: bottom right

设置 background-origin 属性：

为什么会这样？原来，元素的CSS样式设定中定义了另外一个 background-* 属性：

background-origin: content-box;

/* 说明

background-origin 属性规定 background-position 属性相对于什么位置来定位，值有：

① padding-box 默认，背景图像相对于内边距框来定位(覆盖padding，贴边框)

② border-box 背景图像相对于边框盒来定位（覆盖border，全部覆盖）

③ content-box 背景图像相对于内容框来定位（覆盖内容，贴内边距内缘）

*/

本节开始给出的示范，使用了 ③ content-box 的设定，背景图像相对于内容定位。内容其实说的是内容区域，具体指元素中没有进行特殊定位的子元素（比如图片）和子节点（比如文本）的自然呈现的区域，在这个区域里，子内容按代码流的出现次序进行自然排列，它们会受到宿主元素的内边距设定的影响，如果内边距即padding大于 0px 则前述子元素和文本不会靠边，上下左右都会与元素的边境拉开padding所设定的内边距距离。

不论内边距设定与否，我们都可以通过 background-origin 来设置 background-position 的定位模式：靠边（覆盖border边框）、挨边（覆盖内边距区域）、和内容对齐（覆盖content区域）。这里需要注意，一是元素的几个概念要理清：边框（border）、内边距（padding）、内容区（content）；二是弄清边框、内边距和内容区的边界问题：边框在元素的内边缘、紧挨着内边距。内边距是空白的区域，上下左右都存在，它用来隔开元素边框与元素子内容。内边距再往里就是内容区了，内容区就是元素子内容呈现的地方。可以点击上面的三个按钮查看不同的 border-origin 设置效果并理解元素的这几个概念和它们之间的边界问题。

一般而言，设置元素的背景图像，总是希望背景图片能够覆盖边框以外的全部区域，所幸的是，不设置 background-origin 属性就可以达到要求，这是我们过去一直不介绍这个属性的原因。如上代码介绍里说明的，覆盖内边距是 background-origin 的默认值，这就能让背景图像覆盖到除边框（border）外的所有元素区域，显然正是我们所需要的。当然了，很多应用场景可能会对背景图像的覆盖区域有不同的需求，学习和掌握 background-origin 属性还是非常有必要的。

下一讲我们将学习多背景图像的设置，敬请期待。