                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /H5+JS+CSS3 实现圣诞情缘

图片超出容器时background-position百分比值方向的问题//列子评论里有

我想知道为什么当图片的大小超出父容器时；background-position设置的百分比值是乱的（或者说反的，百分比值也没有规则了），而案列中却刚好又还可以用。正常来说background-position的百分比的正值是图片向右移动，负值反之。当图片超出容器大小时，百分比正值向左移动，负值反之，而且图片的百分比长度值变了（貌似变小了）。

阿辉2

2015-12-15

源自：H5+JS+CSS3 实现圣诞情缘 5-2

关注问题我要回答

2258

操作

收起

5 回答

狂飙的蜗牛_1 回答被采纳 +3 积分
2015-12-15

当background-position以百分比来定义时,例如：

background-position：50% -30%；

意思是：

x：（容器的宽度-图片的宽度）x 50%

y：（容器的高度-图片的高度）x（-30%）

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

zhongkeyuan
2016-06-10

100% {

background-position: -300% 100%;

这个-300%怎么理解啊？

按照x：（容器的宽度-图片的宽度）x -300% =9*容器宽度啊，

而图片宽度=4*容器宽度。

这是怎么弄？

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

echo_kinchao
2015-12-16

background-position 你可以通过这个来设置

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

#1

阿辉2 提问者

谢谢你，这个我已经弄清楚了，你爱是帮我回答那个解耦的作用是什么吧，解耦或者不解耦在具体情况下会发生什么不好的事情。

2015-12-16 回复有任何疑惑可以回复我~

阿辉2 提问者
2015-12-16

你回答的很对啊，我花了一个多小时在一点一点测试，还是把负值百分比理解成相对图片自身的长度（这是错的），现在才看到你的追答，恍然大悟。wsschoool里没有介绍的这么详细，所以我一直没搞明白。真是感谢你啊，我加你为好友啊，以后多指教。

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

阿辉2 提问者
2015-12-15

这个我知道，我说的是图片超出容器是，正负百分比方向反向的问题

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

#1

狂飙的蜗牛_1

图片超出容器时，（容器的宽度-图片的宽度）就是负值啊，负值乘以一个正的百分比当然就是负值啊，所以就是向左

2015-12-15 回复有任何疑惑可以回复我~

#2

狂飙的蜗牛_1

当background-position的属性值为具体的像素值时就不是上面这个规则了例如： background-position：50px -30px；意思是： x： 50 p x y：-30 px

2015-12-15 回复有任何疑惑可以回复我~

#3

阿辉2 提问者回复狂飙的蜗牛_1

你知道订阅发布模式的应用场景吗？

2015-12-16 回复有任何疑惑可以回复我~

查看1条回复

举报

0/150

提交

取消

H5+JS+CSS3 实现圣诞情缘

参与学习 121781 人
解答问题 211 个

为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合

本课相似问答

2 回答background-position的百分比怎么弄啊？

2 回答background-position: -400% 100%的百分比怎么理解？

1 回答没有谁解释background-position用百分比的用法吗？

3 回答background-position 火狐兼容性

1 回答怎么通过百分比去取图？

搜索更多本课相关问答

图片超出容器时background-position百分比值方向的问题//列子评论里有

我要回答关注问题

意见反馈帮助中心 APP下载