素材
HTML+CSS代碼
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用精靈圖拼出自己的名字</title>
<style>
span {
display: inline-block;
background: url(../image/abc.jpg) no-repeat;
}
.z {
width: 120px;
height: 120px;
background-position: -478px -557px;
.h {
width: 110px;
height: 110px;
background-position: -216px -139px;
.a {
width: 115px;
height: 115px;
background-position: 0px -6px;
.o {
width: 111px;
height: 111px;
background-position: -370px -274px;
.d {
width: 104px;
height: 116px;
background-position: -360px -6px;
.a2 {
.q {
width: 113px;
height: 123px;
background-position: -4px -402px;
.i {
width: 65px;
height: 113px;
background-position: -322px -138px;
.a3 {
.n {
width: 117px;
height: 117px;
background-position: -253px -272px;
.g {
background-position: -96px -138px;
</style>
</head>
<body>
<span class="z">z</span>
<span class="h">h</span>
<span class="a">a</span>
<span class="o">o</span>
<br>
<span class="d">d</span>
<span class="a2">a</span>
<span class="q">q</span>
<span class="i">i</span>
<span class="a3">a</span>
<span class="n">n</span>
<span class="g">g</span>
</body>
</html>
效果圖
