老师，这种雪碧图怎么找background-position的定位啊？

小章鱼丸 2019-02-24

源自：项目：实现商品列表页 3-9 作业题

1

收起

4回答

好帮手慕星星回答被采纳获得+3积分 2019-02-25 16:44:49

之前说的宽高，就是左上角（0,0）到元素左上角的位置：

截图的时候可以显示这个矩形的宽高，就是要设置的位置，然后测量出这个三角形的宽高就好了，例如：

自己可以试试。

提问者小章鱼丸 2019-02-25 16:02:34

像要显示这个三角符号，那它的x,y坐标都怎么确定啊不像别的雪碧图 20x80的然后高度平均分纵坐标就是依次加20那种就行这个横纵方向都没规律啊

好帮手慕星星 2019-02-25 14:12:22

简单一点你可以使用qq截图，圈出需要测量的位置，上面就会标注宽高，但是测试可能会不准确，可以在控制台再进行调整。或者是使用ps来进行测量。

提问者小章鱼丸 #1

不是测宽高，是想找到位置啊不是相对（0,0）点的坐标吗

2019-02-25 16:00:43

好帮手慕星星 2019-02-25 10:55:25

你好，雪碧图的左上角开始是（0,0）位置，往右边和往下面都是负值。

可以先测量出要显示图片的宽高，然后找到图片左上角点的位置即可，例如显示橘色的图标：

自己可以测试下，祝学习愉快！

提问者小章鱼丸 #1

这种图标排布不规整的要怎么测量呢？在控制台中自己一点点调试着找吗？还是借助photoshop之类的软件可以看出来呢？

2019-02-25 13:38:22

相似问题

老师说的这个base64才能引入html么

雪碧图在代码中应该怎么写

老师这里的列表背景图片为啥是17px和20px，不应该是负值吗？这个和雪碧图定位有什么不同吗？

background-position

怎么获取对应的图片

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018

参与学习人
提交作业 2198 份
解答问题 5012 个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

本课精华内容

问答作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载