友情提示:以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码,现在免费分享给大家,获取的方式为:
关注此头条号“互联网IT信息”——>私信发送 “天猫css” ,(注意:css全是小写)即可得到源代码的获取方式。
1. 此篇文章讲解目录:
案例和由此案例重点讲解的知识点介绍
案例代码实现
css雪碧图知识点详解
2. 案例和相关知识点介绍
此案例是页面,效果如下:
此页面的技术实现解析:
使用https://www.toptal.com/developers/css/sprite-generator可以在线将所有图标生成成雪碧图,直接使用
此案例中主要用到了,基于此,我们会系统的将如下知识点全部讲解:
css雪碧图(又叫精灵图)
3. 此案例的代码实现
第一步:编写左侧html代码,使用无序列表完成
第二步:编写通用css样式
第三步:编写无序列表的相关样式
第四步:使用生成好的雪碧图样式,并通过icon对雪碧图的大小位置进行额外设置,这里我们通过zoom属性,来控制实际显示大小
4. 此案例的知识点详解
精灵图概念简述:
简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图
工作原理:
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。
精灵图的制作注意事项:
1:制作精灵图,小背景图片之间必须有间隙
2:保存精灵图要保存为拼合png格式
代码实例:
div{
width: 80px;
height: 30px;
background: url(img/3.png) -78px -50px ;
}
p{
width: 60px;
height: 20px;
background:url(img/3.png) -5px -102px;
}