前端-------精灵图

以拼写名字----AN为例（效果：你想要用到的图片放在一张图片上，通过选择这张图片上的位置来获取你想要的图片，减少请求次数）

1、背景图

 

 2、代码展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵图--自己名字</title>
<link rel="stylesheet" href="css/sublime.css"/>
<style type="text/css">
　　span{
　　　　background: url(images/abcd.png) no-repeat;
　　　　float: left;
　　　　}
　　span:first-child{               /* 也可以通过class是选择器或者id选择器设置样式*/
　　　　width: 108px;
　　　　height: 109px;
　　　　background-position: 0 -9px;  /*位置坐标可以通过ps或着FW获得*/
　　　　}
　　span:nth-child(2){
　　　　width: 110px;
　　　　height: 113px;
　　　　background-position:-256px -279px; 
　　　　}
</style>
</head>

<body>
　　<span class='h' id='h'></span>
　　<span class='j' id='j'></span>
</body>
</html>

3、代码结构

 

 4、页面展示

 

 5、工具：sublime

posted on 2019-11-12 17:04  圣上不开心吖  阅读(289)  评论(0)    收藏  举报