使用方法：
1.HTML标签方式插入图片 调节内外间距（需要小盒子作为容器）
2.background 方式加入图片 通过background-position调节位置（需要小盒子作为容器）
3.使用before创建容器 再用方法二插入图片
代码示例（方法3）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.a {
height: 540px;
background-color: #1a1b1f;
overflow: hidden;
}
.b {
font-size: 22px;
color: #e1e3e2;
line-height: 1;
text-align: center;
margin-top: 53px;
margin-bottom: 20px;
}
.c {
font-size: 12px;
color: #e1e2e3;
line-height: 1;
text-align: center;
margin-bottom: 44px;
}
.center {
width: 1202px;
height: 390px;
/* background-color: aqua; */
margin: 0 auto;
}
.a .center .center1 {
width: 340px;
height: 260px;
background-color: #cecfd1;
float: left;
margin: 66px 29px 0;
}
h4 {
line-height: 1;
font-size: 16px;
color: #f25b54;
font-weight: 500;
text-align: center;
margin-top: 30px;
}
.p4 {
font-size: 12px;
line-height: 30px;
color: #000100;
margin: 17px 44px 0;
text-align: center;
}
.a .center .center1::before{
content: "";
display: block;
width: 130px;
height: 130px;
/* border: 2px solid rebeccapurple; */
margin: -65px auto 0;
overflow: hidden;
background: url(img/allimg_02.png) no-repeat;
}
.a .center .p2::before{
background-position: 0 -162px;
}
.a .center .p3::before{
background-position: 0 -325px;
}
</style>
</head>
<body>
<div class="a">
<p class="b">我们的优势 Our Advantages</p>
<p class="c">创独一无二的设计，造国际品质的产品，行无微不至的服务</p>
<div class="center">
<div class="center1">
<h4>我们的设计Our Design</h4>
<p class="p4">从实地到方案敲定再到设计出图，每一步都有优秀的设计团队全程跟踪，为您打造出最合适的作品是最诚恳的义务。</p>
</div>
<div class="center1 p2">
< <h4>我们的设计Our Design</h4>
<p class="p4">从实地到方案敲定再到设计出图，每一步都有优秀的设计团队全程跟踪，为您打造出最合适的作品是最诚恳的义务。</p>
</div>
<div class="center1 p3">
< <h4>我们的设计Our Design</h4>
<p class="p4">从实地到方案敲定再到设计出图，每一步都有优秀的设计团队全程跟踪，为您打造出最合适的作品是最诚恳的义务。</p>
</div>
</div>
</div>
</body>
</html>
标签：center,color,margin,精灵,height,制作,background,font,方法 From： https://www.cnblogs.com/xu529/p/16988023.html