为什么加background-position:0 -30px，点击的就变成了橘黄色，那个图片是以什么为基准的，为什么是-30？实在不懂。

background-position:0 -30px

奋斗哼哼

2016-03-13

源自：导航条菜单的制作 3-3

关注问题我要回答

1813

操作

收起

5 回答

陈微语回答被采纳 +3 积分
2016-03-16

图片的样式你可以看前面的视频，有说明。大概就是一个120px * 60px 的图片，上面30px是灰色的，下面30px是橘黄色的。

把这张图片设为背景的话，默认background-position：0 0；也就是距离左边0px，距离上面0px ,刚好是对应图片的灰色区域；

设置background-position：0, -30px ;就是距离左边0px ,距离上面-30px（图片整体上移30px） ,所以你看到的背景就变成橘黄色咯。

9 回复有任何疑惑可以回复我~

行恒
2016-05-13

图片分成上下两个部分，白色和橘色，宽度120px, 高度各30px, 当a:hover停在导航上时候，橘色上移30px，刚好覆盖白色的导航。

0 回复有任何疑惑可以回复我~

揸刀人
2016-03-26

移动是循环的 30 90 -30 -90都可以

1 回复有任何疑惑可以回复我~

qq_盛世流苏_0
2016-03-15

background-position:0 30px

正30px才是上移

0 回复有任何疑惑可以回复我~

qq_时光不扰_0
2016-03-13

相当于向下移动了30px

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

导航条菜单的制作

参与学习 123848 人
解答问题 838 个

水平、垂直、圆角导航条菜单，让您的技术探索之路更高效

为什么加background-position:0 -30px，点击的就变成了橘黄色，那个图片是以什么为基准的，为什么是-30？实在不懂。

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号