前端背景图放置_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 ，实际内容部分。

图示元素的区块模型，图片来源：参考 Codrops CSS

如果您已经知道如何使用 CSS 排版的模式规则那您可能会问那 margin 呢？margin 在元素的最外围，包含整个元素，它被用来设定各个元素之间的距离，定义上它不被算在元素内部。

好！当我们给元素设定了 background - 可以是图片或颜色。背景默认会从 padding 区块 开始画，这个行为是可以被改变的，透过使用 background-origin 这个属性就是用来设定背景从哪边开始，默认是 padding-box。

为了准确的把背景图片放到指定的区块中，这个区块需要一个座标系统，用来计算座标。接着让我们更深入的看看座标系统。1background-origin: padding-box|border-box|content-box|initial|inherit;

元素的座标系统

默认情况下，CSS 区块模型的特性是每一个元素都会透过自己的 height 和 width 来建立座标系统。这个座标系统被用来设定元素和其他元素之间的位置关系，同时影响内部子元素与自己的位置关系。

所以在 CSS 中一个 HTML 元素有一个座标系统，但如果是 svg 元素则没有。这是因为 svg 本身并没有区块模型的概念。

在 CSS 里通常一个元素的起始点会在元素的最左上角，而背景座标区域也同样属于区块模型概念，并且使用这种观念来摆放图片，就是从图片的左上角的点开始。

OK! 因为默认的座标区块是 padding 区块，因此我们的背景就会从 padding 区块的最左上角开始。

意味着当您套用一张背景图，浏览器会先从 padding 最左上角的点开始把图放进去，然后重复摆放该图。

例如：您套用了一张背景到元素中且设定了no-repeat，这样图片就只会显示一次，如果您没设定就会一直重复。

后面我们会继续讨论如何使用 background-position 属性来调整默认最左上角这个行为。

不过在讨论 background-position 之前我们先来验证 background-origin

使用 background-origin 调整背景摆放的区域与座标系统

background-origin 属性主要是用来改变座标系统的原点借此调整背景排版的位置，我们有三种值可以用 padding-box, content-box, border-box 直接来看看范例，要小心的是 border-box 其实是有变的不过呢如果您的 border 有设定颜色，那么会把图片盖掉，您可以试着把 border 的 color 弄成半透明验证。

接着我们就可以使用 background-position 指定背景的位置，我们剩下所有的范例都会采用 padding-box 的设定。

使用 background-position 来设定图片位置

我们已经看过上一节示范默认的图片位置的起始点和排版的区域是如何运行的。也恩赐默认的 position 的值是 0% 0%。

默认的位置值是采用百分比当作单位。您可以直接设定不同的百分比或者根据 position area 范围和距离来设定长度

上面图表示的是设定和边缘的距离，除了设定百分比和绝对长度之外还有 top, right, left, bottom, 和 center 五个关键字能用。就是区分成关键字和长度(px)和百分比这三大类。

一个位置的设定方式可以是一个偏移量值(关键字,百分比,长度), 两个偏移量(可以是上面三种值混搭，不过要注意关键字的部分前面是横向 x 轴的所以是 [left | center | right])，这边要提醒您的是说 background-position: top 25%; 是不正确的，要 background-position: right 25%;，以及四个偏移量，四个偏移量的话就是关键字搭配长度。

如果两个值的部分都是关键字那顺序可以不照语法指定，意思是您可以先放垂直 y 轴的属性再放 x i.e background: bottom left;

下面是语法和一些范例1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16// 语法

background-position: 30% 15%, 40% 80%, 10px 10px

background-position: length length

background-position: percentage percentage

background-position: percentage

background-position: bottom length right length

background-position: left top

// 范例

background-position: top left;

background-position: 50px 30%;

background-position: right: 10px bottom 100px;

background-position: center center

background-position: 10px 20px;

background-position: 5em 2em;

background-position: 75% 50%;

如果您提供一个值的时候那么第二个值(偏移量)1

2

3background-position: 10% 50%;

background-position: top; /* 等于 `top center` */

background-position: 50px; /* 等于 `50px center` */

设定上您可以混合任何合法的参数值，例如混搭百分比和长度或者关键字，不过要注意的是关键字的部分，除非全部都用关键字否则顺序很重要，注意第一个参数对应水平的偏移量，第二个对应垂直的。

实际上关键字是百分比的缩写，例如 top 等于 0%，bottom 等于 100% 以此类推。

好！接着让我们开始看看每一种可能的值是如何运行的，这应该是这篇最重要部分，不同的参数类型会产生不同的效果。

绝对位置/长度如何运行

当我们指定一个绝对位置的属性单位(通常是 px)时，您执行的事让背景图片根据左上角原点来偏移，换句话说图片就是根据左上角原点搭配您设定的值来偏移。

看下面的图片比较容易理解

当然绝对位置的值可以是负数，负数的话就会往反方向移动

百分比是如何运行

不同于绝对位置根据原点偏移的概念，百分比会对齐图片的 X% 的点和容器 X% 的位置。

举例来说 0% 0% 会对其图片的 0% 0% 位置和元素背景区域的 0% 0% 位置。 一样我们透过下面图片来理解

而百分比一样也可以设定负值。

搭配使用关键字指定边缘

在上面的范例我们都是从左边和上面来计算偏移，这是默认的行为。

不过我们可以结合关键字来指定边缘

例如：1background-position: top 1em right 3em;

注意关键字要在前面，另外如果指给定三个值 background-position: top 25px right ; 最后一个会变成 0 而设定了无效的值那么就会使用默认值 0% 0% 例如 background-position: top 25%

尺寸，重复，裁切等等

记住，您可以使用多张图片，如果要对多张图片设定位置只要使用逗号分隔每一组设定即可。其他如果要控制大小则用 background-size，总而言之有 9 个关于如何控制背景图的属性可以使用，一旦您能掌握 position 和 origin 剩下的观念就相对单纯许多。