css3背景制作（更加强大的背景图像）

CSS3在原有CSS的基础上，为背景添加了三个属性，这三个属性可以调整背景图像的大小，设置背景图像的显示原点，设置背景图像的显示区域。本文小海前端（头条号）就带领大家一同学习与背景有关的CSS3属性。

承接文章：CSS3中取值为颜色的属性，系统了解颜色的原理，轻松掌握颜色取值

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本篇文章涉及到的CSS3属性为：

• background-size

• background-origin

• backgroud-clip

一、定义多个背景图像：

定义背景图像依然采用我们非常熟悉的background-image属性来实现。唯一不同的是：CSS3允许利用该属性定义多个背景图像。

使用background-image属性定义多个背景图片的格式如下所示：

background-image:url(Image1_URL),url(Image2_URL),url(Image3_URL),…

许多人肯定会想，这会是一种什么效果呢？

从上述代码中可以看出，background-image中所设置的多个背景图片，是按照图片的先后顺序来排列显示的，就好像Photoshop中的图层一样：01.jpg显示在顶层，02.jpg显示在中间层，03.jpg显示在最底层。

由于background-image属性在CSS3技术中可以添加多个图片并进行层次显示，所以background中的其他属性也可以对应多张图片取多个值，这样就可以为每一张背景图片设置不同的背景效果。

例如下列代码：

#box{

width:600px; height:500px;

border:solid 1px #ff5857;

margin:100px auto 0;

background-image: url(../images/01.jpg),

url(../images/02.jpg),

url(../images/03.jpg);

background-repeat: no-repeat,repeat-x,no-repeat;

}

上述代码的显示结果如下图所示。

二、指定背景图像的原点位置：

CSS3利用background-origin属性来设置背景图像的原点位置。

CSS3 利用 background-origin 属性来设置背景图像的原点位置

该属性的取值如下所示：

• border-box，背景图片的原点位置为边框区域开始的位置。

• padding-box，背景图片的原点位置为填充区域开始的位置。

• content-box，背景图片的原点位置为内容区域开始的位置。

要想展示这个属性，必须首先设置一个<div></div>容器，并将该容器的padding和border的宽度设置为一个较大的值，让容器的填充和边框显得较为明显。

这里，我们将#box的padding设置为50px，border的宽度设置为20px。CSS代码如下所示。

#box{

width:600px; height:500px;

border:solid 20px #ff5857;

margin:100px auto 0;

box-sizing: border-box;

padding:50px;

}

然后利用background-image属性设置一个图片作为背景。

下图为我们展示了将background-origin属性设置为content-box时背景的显示外观。

背景图像原点位于内容区域

上图的效果实现需要在原有CSS代码的基础上添加下列内容：

#box{

background-image: url(../images/03.jpg);

background-origin: content-box;

background-repeat: no-repeat;

color:#ffff00;

}

大家可以将上述代码中background-origin属性的取值改为padding-box或border-box试一试。

三、背景图像的显示区域：

CSS3利用background-clip属性来设置背景图像的显示区域。

CSS3 使用 background-clip 属性来设置背景图像的显示区域

该属性的取值如下所示：

• border-box，背景图像从边框区域开始显示。

• padding-box，背景图像从填充区域开始显示。

• content-box，背景图像从内容区域开始显示。

将上述CSS代码中的部分内容改为如下格式：

background-origin: padding-box;

background-clip: content-box;

这说明指定的背景图像从填充的位置开始作为显示原点，但是只显示内容的部分区域。最终的效果如下图所示。

背景图像只显示在内容区域

四、背景图像的大小：

CSS3利用background-size属性来设置背景图像的大小。

CSS3 利用 background-size 属性来设置背景图像的大小

该属性的取值如下所示：

• cover，保持背景图像本身的宽高比，完全覆盖所定义的背景区域。

• contain，保持背景图像本身的宽高比，正好适应所定义的背景区域。

• l带有单位的数值，设置背景图像的大小为具体的数值。取值为两个用空格隔开的数值，表示宽度和高度。

• l百分比，设置背景图像的大小为父元素的百分比。取值为两个用空格隔开的百分比，表示宽度和高度所占父元素的比例。

设置一个<div></div>容器，宽度为500像素，高度为400像素。设置一张图片，宽度为700像素，高度为300像素。

CSS代码如下所示：

#box{

width:500px; height:400px;

border:solid 1px #ff5857;

background-image: url(../images/05.jpg);

}

默认情况下，CSS技术是不会改变背景图像的大小的。

为上述CSS代码添加background-size属性：

1、设置为cover：在保持背景图像宽高比的前提下，用这张图片完全覆盖背景区域，那么就只能显示背景图像的一部分。

cover取值下的背景图像

2、设置为contain：在保持背景图像宽高比的前提下，用这张图片适应背景区域，即在整个背景区域要显示图像的全部。因为这张图像高度较小，因此在垂直方向上会发生平铺。

contain取值下的背景图像

3、设置为两个100%值：图像会完全占据背景区域，并不在考虑宽高比。

background-size:100% 100%;

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

在本文的基础上，小海前端（头条号）会在下一篇文章中为大家讲解一个利用CSS实现的“信纸效果”实例。主要用到的就是本文讲到的背景类属性，希望大家不要错过。

,