目录
一什么是雪碧图?
1.雪碧图是一些比较小的图片,拼接到一起,使用的时候通过小窗口展示出雪碧图的部分,通过此行为可以优化网页结构!!!
二如何插入雪碧图?
1.添加一张雪碧图到你的项目文件中
2.在网页中建一个小的视口
<!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>
<style>
.aaa{
width: 30px;
height: 30px;
border: 1px solid red;
background-image: url(./img/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 0px 0;
}
</style>
</head>
<body>
<div class="aaa">
</div>
</body>
</html>
3.在小时口中导入背景图片
背景图
background-image: url(./img/ToolsIcon.png);
不重复
background-repeat: no-repeat;
移动
background-position: 水平 垂直;