今天咱们来聊聊一个在实操中经常遇到一个小点。
图1:
图2:
很多页面都有图一的一下小icon,小图标。有些时候这些图标并不是独立存在的,他可能存在于一张图上,如图2所示。项目中一些小图标、icon在一张图上面的图,我们称之为精灵图(Sprite)或者雪碧图(英文直译而来)。先看效果图
html部分,就是简单地使用了一个无序列表进行效果展示。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="root">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
css样式部分有两个重点。
1.给每个需要展示图标的盒子一个宽高,这里大家需要根据自己需要展示的图标大小去自行设置。需要注意的一点是,如果盒子的尺寸小于图标的尺寸,图片多出的部分会被自动省略。
2.因为图标都在一张图片上面,有的在一个、有的在第二个、还有的在第二行。这就需要我们使用背景定位去调整整个图片相对于这个盒子的位置,以保证可以将我们的图标可以移动到我们设置的盒子中显示出来。同样的你如果觉得不知道该往哪调,你可以先设置0px 0px;然后通过控制台中的样式去实时的调节,最后再将数值修改到代码中。
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.root ul{
height: 40px;
padding-left: 40px;
margin-top: 100px;
line-height: 40px;
}
ul li{
display: inline-block;
height: 30px;
width: 30px;
}
ul li:nth-child(1){
background: url(../img/sprite.png) no-repeat 4px 1px;
}
ul li:nth-child(2){
background: url(../img/sprite.png) no-repeat -38px 1px;
}
ul li:nth-child(3){
background: url(../img/sprite.png) no-repeat -81px 3px;
}
ul li:nth-child(4){
background: url(../img/sprite.png) no-repeat -123px 2px;
}
ul li:nth-child(5){
background: url(../img/sprite.png) no-repeat -171px 0px;
}
ul li:nth-child(6){
background: url(../img/sprite.png) no-repeat -214px 2px;
}
ul li:nth-child(7){
background: url(../img/sprite.png) no-repeat -267px 1px;
}
ul li:nth-child(8){
background: url(../img/sprite.png) no-repeat 2px -36px;
}
今天就这点了,才遇到的
更多推荐
CSS样式中精灵图的使用
发布评论