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

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

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,问题解答如下:

1. 这里没有把图片当做雪碧图来使用,它就是一张正常的背景图,它的坐标使用正值的原因如下:

当不设置位置时,背景是如下形式:

http://img1.sycdn.imooc.com//climg/5f10153709944b9805540193.jpg

http://img1.sycdn.imooc.com//climg/5f10153c09d3994806040409.jpg

如果想让背景图往右侧、下侧移动一下,就需要设置正值,如下:

http://img1.sycdn.imooc.com//climg/5f10154f0914b0df10800298.jpg

2. 如果想显示背景图中的一部分时,就需要将图片当成雪碧图使用,如下:

http://img1.sycdn.imooc.com//climg/5f101566093375ba08060299.jpg

页面效果如下:

http://img1.sycdn.imooc.com//climg/5f10156c0945636c02720161.jpg

此时它的y方向值为负,含义如下:

http://img1.sycdn.imooc.com//climg/5f101574097c8d6a18290590.jpg

http://img1.sycdn.imooc.com//climg/5f10157f0910298707230465.jpg

同学应该是将坐标正负记错了,可以参考上面的例子,敲一下代码,再改动一下坐标值,根据效果,理解一下。

祝学习愉快!

好帮手慕久久 2020-07-16 15:44:05

同学你好,问题解答如下:

“.content-news .list”的背景,使用的是一个完整的背景图,不是雪碧图:

http://img1.sycdn.imooc.com//climg/5f1005100949e4ec08440658.jpg

而雪碧图是将“list-yellow.jpg”这张图片分成多个部分,使用其中一个部分,需要设置位置为负值:

http://img1.sycdn.imooc.com//climg/5f10052009bccd8404630410.jpg

同学可以再看一下,理解一下。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

  • 提问者 慕斯卡0165078 #1
    我想问是雪碧图定位为什么使用负值,而这里是正值?不太理解雪碧图和这里的定位,y轴往下,x轴往右不是负值吗?
    2020-07-16 16:17:03
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师