前端背景图放置_CSS 背景图片排版

使用 CSS 套用背景图片到元素中可能是您前端设计过程中最常用到的功能。

background 有非常丰富的属性，让我们可以针对不同的需求做设定。

同时一个元素可以具有多张背景图片。如果您想要套用多张图片您可以直接在 background-image 属性值设定，不同图片路径之间只要用 , 分开即可。background-position 属性则是用来指定背景图片的位置，而这个属性非常值得深入研究，不同的设定会造成不同的结果，有些效果对您来说可能是没看过的。

为了确保本文的程序和概念清楚单纯，我们将只用一张图片的范例来验证了解每个属性，不过这些概念同样适用于多张图片的情况下。

一个背景图片被放在一个我们称之为 background position area 的地方，这个背景座标区域功能就如同其名称一样，其中有一个座标系统让我们可以处理背景图的定位。

在我们进一步开始探讨放置图片的概念之前，让我们先快速的在看过一次 CSS box model 以及看看它如何影响元素中背景图片的位置。

根据定义在 CSS 中一个元素通常有 3 个区块，这几个区块我们统称区块模型，如果您常阅读英文的文档那么这边就是 box ，这几个区块分别是 border 区块, padding 区块, content 区块。首先是 border 区块 这个区块在元素的最外层包含整个内容加上边框即 border 本身。

padding 区块 则是扣除掉 border 后元素内容和内容外围的空间，没错就是您透过 padding 属性设定的间隙。

最后 content 区块 就是把元素扣掉 border 和 padding ，实际内容部分。