＜CSS＞背景图片的搭配使用

我们就以信纸为例，下面都将使用图片

首先准备好我们的图片素材

  

这是我们最终的效果图

好了，接下来我们开始操作。

1.我们在html的body中先创建个div标签，中间什么都不用写，然后创建个外部样式表（css文件），接着在我们的html文件中head中建立个link标签（link标签中的href就是css文件的位置），使其html和css关联上。

 ./代表同级目录，如果css文件和html文件不在同一个目录就使用../，这个指上一级目录，直到找到css文件使其关联起来。

2.接着，先调整外边距和内填充。我们先输入这俩条代码：

       margin代表着div标签的外边距，指的是div标签和别的标签之间的距离，第一个50px数值代表上下外边距的宽度为50px；第2个auto数值代表外边距左右距离自动对齐。

      padding代表着div标签的内填充，指的是中间内容与线之间的距离，border就是线，最中间的就是content也就是div标签中的内容。

3.然后我们设置div标签的内容的大小：

我们的content就变成了这样

4.接着就开始设置我们的线，也就是我们的信纸的边框：

 第一个数值20px就是我们线的宽度；第二个数值代表的是线的类型，groove指的是3D 凹槽边框；第3个数值rgba分别指的是红色 绿色 蓝色 透明度，前三个数值均可选择0~255之间（具体可参考rgb颜色代码表），第4个数值透明度取值0~1之间（0代表完全透明，1代表完全不透明）。

效果图如下：

 5.然后就可以插入图片了，这里我们插入的方式是背景图片：

 补充一句，这里的png分别是最终效果图的：1.png左上角的小鸟图片，2.png右下角俩个小孩图片，3.png中间信纸的线，4.png背景颜色图片（可以改变顺序，但是后续的代码位置也必须改变，都是互相对应的）

好了，言归正传，让我们看一下效果图：

 是不是感觉好多小鸟，因为如果图片小的话，它会自动将图片铺满整个框架，别急，看我们接下来的步骤。

 6.接下来我们让这些图片该重复的重复，不重复的不重复

 background-repeat代表背景图片是否重复，repeat就是重复，no-repeat就是不重复，这4个数值分别对应上边4个图片的位置，所以如果改变图片的顺序的话，这里的4个数值也必须改变。

上述代码表示，第一张不重复，第二张不重复，第三张重复，第四张重复。

让我们看一下效果图：

 

 7.然后我设置一下图片的起始位置，让它们去该去的地方：

 background-position指背景图片的起始位置，top上，right右，bottom下，left左。

上诉代码表示：第一张图片起始位置在左上角，第二张图片在右下角。

效果图如下：

8.裁剪多余的部分：

 

 background-clip指从哪个位置开始裁剪，比如border-box，就是指线以外的部分被裁剪掉了，只保留线以内的内容

上诉代码表示：第一张图片从线开始裁剪，第二张图片从线开始裁剪，第三张图片从内容开始裁剪。

效果图如下：

 

 做到这里已经看出差不多已经完成了，但我们还差最后一步

9.最后一步：定位，虽然我们第7步已经设置了位置，但还是不是正确位置

 

 background-origin指背景图片定位

上诉代码指将图片定位到线上

效果图如下：

 好啦，这就是我们的完成品，大家学会了吗，接下来我把完整代码放上来：

是不是感觉很简单，如果大家遇到不会的可以私信我，我看到后会第一时间帮你们解决，欢迎大家提问。