承接文章：更加强大的背景图像，CSS3增强的背景效果，前端对背景的优化
技能等级：中级 | 适宜有一定的CSS根本的人士阅读。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，由于这些文章都是连载的，并且是经由系统的归纳和总结的。塌下心来负责阅读，你一定会学到对你有用的知识。
一、信纸背景实例效果：
本篇文章所实现的信纸背景效果如下图所示。
信纸背景实例的终极效果图
首先要明确一点：上图中看到的除了笔墨以外的背景部分，并不是一张完全的背景图片，而是由多个具有透明背景的png图片利用CSS3的多重背景拼接出来的。
本实例所利用到的素材图片如下图所示。
用到的素材图片
从上图中可以看出，我们一共利用了六张素材图片。前五张图片都是png格式，背景为透明。末了一张图片是一个纹理jpg图片，可以随意设置透明效果的纹理。
left-bottom.png，实现左下角的花边效果。
left-top.png，实现左上角的花边效果。
right-bottom.png，实现右下角的花边效果。
right-top.png实现右上角的花边效果。
line.png，实现信纸的水平线格子效果
wenli.jpg，实现信纸的背景纹理效果。
随着小海前端（头条号）学的小伙伴们，可以自行在网上搜索图片，利用Photoshop制作成素材的样子，大家可以发挥自己的设计头脑，制作出各种不同的信纸效果。
二、页面布局：
这个实例的页面布局非常大略，制作一个<div></div>标记对作为容器，并将该容器的id属性的取值设置为mail。然后在容器内部放置<h1></h1>标记对作为标题，信件的正文利用<p></p>标记对进行包裹即可。
HTML代码构造如下所示。
<div id=\"大众mail\"大众>
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>
三、利用CSS设置#mail的常规属性：
为了便于查看，可以设置#mail的CSS样式。设置该容器的宽度为400像素，高度为600像素。并设置容器在页面内居中显示。将容器的添补宽度设置为50像素，并在容器外部添加一个10像素的深赤色边框线。
末了调度内部笔墨的CSS样式。包括笔墨的字号设置为14像素，首行缩进为28像素，行高为27像素。当然也可以根据水平线格子的间隔高度自行调度上述参数。
CSS代码如下所示。
#mail{
width:400px; height:600px;
margin:0 auto;
padding:50px;
border:solid 10px rgba(132,26,26,0.8);
font-size: 14px;
line-height: 27px;
text-indent: 28px;
}
四、加载背景图片：
接下来我们要为#mail加载背景图片，这须要将素材图片中准备的所有png图片和wenli.jpg图片全部加载到该容器中作为背景。
CSS3中的background-image已经支持多背景图片的功能，只须要将多个图片的url()路径之间利用逗号隔开即可。一定要把稳：必须是逗号进行间隔。
CSS代码如下所示。
background-image: url(../images/line.png),
url(../images/left-top.png),
url(../images/left-bottom.png),
url(../images/right-top.png),
url(../images/right-bottom.png),
url(../images/wenli.jpg);
五、设置多背景图片的背景属性：
下一步须要设置多背景图片的其他背景属性。这须要根据background-image属性加载背景图片的顺序来完成其他背景属性的设置。
这里须要把稳，上一步的代码中显示，第一个加载的是水平线格子图片line.png，接下来一次加载的是左上角花边、左下角花边、右上角花边、右下角花边，末了是纹理图片wenli.jpg。
1、设置背景图片的平铺办法：
我们知道：第一个加载的水平线格子图片该当平铺；四个方向角的花边图片不应该平铺；纹理图片该当平铺。
因此根据背景图片的加载顺序可以书写成如下格式：
background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
大家仔细不雅观察，所有的平铺取值都是利用逗号隔开的，而且共有6个平铺取值，恰好对应background-image属性中加载的六张图片的顺序。
2、设置背景图片的定位：
这里利用background-position属性来设置背景图片的定位。
第一个加载的水平线格子图片由于平铺，以是位置可以从容器的左上角就开始显示。因此取值为left top。
左上角花边该当显示在左上角，即left top。
左下角花边该当显示在左下角，即left bottom。
右上角花边该当显示在右上角，即right top。
右下角花边该当显示在右下角，即right bottom。
末了一个加载的纹理图片由于也平铺，以是也从左上角开始显示。
CSS代码如下所示：
background-position: left top,left top,left bottom,right top,right bottom,left top;
3、设置图片的大小：
这里可以根据背景图片本身的大小进行适当的缩放。
CSS代码如下所示：
background-size: 50px,20%,20%,20%,20%,50px;
属性background-size原来须要指定两个数值来表示宽度和高度的大小变革。若只指定了一个数值，则宽度和高度均采取该数值来对图片进行缩放。
4、设置图片显示的原点坐标：
这里只有水平线格子图片和纹理图片的显示须要调度原点坐标。
水平线格子只涌如今由文本内容的部分，因此设置为content-box，从文本区域开始显示。
纹理图片可以设置为padding-box，即从添补区域开始显示。
其他图片都设置为border-box，即从边框开始显示。
CSS代码如下所示。
background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;
5、设置图片的显示区域：
每张图片的显示区域都从所设置的原点坐标就开始显示，因此取值与原点坐标的取值是相同的。
CSS代码如下所示。
background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;
六、全体实例的完全CSS代码：
本篇文章带领大家所制作的信纸背景效果的完全CSS代码如下图所示。
完全的CSS代码
小海声明在头条上揭橥的这些文章都是从前端开拓的根本开始一步一步讲起的。我非常希望能有更多的前端开拓初学者通过我写的文章，逐步学到一定的知识，乃至逐步有了入门的觉得。这些文章都是我这几年传授教化过程中的履历，每写一篇时我都只管即便把握好说话，用大略易懂的措辞描述，同时精心设计版面，让版面更加丰富，引发阅读兴趣。以是，每一篇文章可能篇幅不长，但是都要耗费小海老师良久的韶光。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，由于这些文章都是连载的，并且是经由系统的归纳和总结的。塌下心来负责阅读，你一定会学到对你有用的知识。
关注“小海前端”，我会连续为大家奉上更加深入的前端开拓文章，也希望更多的初学者随着学下去，我们共同将前端开拓的路努力坚持的走下去。文章预报下一篇文章中，小海前端（头条号）会为小伙伴们连续先容CSS3新增的属性值。下一篇文章先容CSS3的边框属性功能。
