2022.11.11
文章目录
一、position是什么？
position在h5当中指定位，例如background-position：设置背景图像的位置。
二、利用position大图定位小图使用步骤
#html总代码 实现大图中“x” ， “s” ， “l” 的图片定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="1.css" rel="stylesheet">
</head>
<body>
xsl
<div class="x"></div>
<div class="s"></div>
<div class="l"></div>
</body>
</html>
1.导入照片
以下为1.css选择器内代码
代码如下（示例）：
div {
width: 700px;
height:700px;
background: url(abcd.jpg) no-repeat;
#图片名称为abcd.jpg
}
2.从大图中分别定位“x，s，l”三个字母
打开图片，利用FastStone Capture等可以拉框的软件从图片的左上角为起点开始拉框到x的左上角位置，获取w*h的数据（宽*高） 注意：w*h写入的时候前面要加负号，具体为什么不知道
以下为1.css选择器内代码
代码如下（示例）：
.x {
width: 110px;
height: 113px;
background: url(abcd.jpg) no-repeat;
background-position: -257px -559px;
}
#对于x的定位
.s {
width: 110px;
height: 113px;
background: url(abcd.jpg) no-repeat;
background-position: -257px -412px;
}
.l {
width: 110px;
height: 113px;
background: url(abcd.jpg) no-repeat;
background-position: 0px -270px;
}
#s和l的定位
总结
background-position大图定位小图的简单方法