图片超出容器时background-position百分比值方向的问题//列子评论里有
来源：5-2 圣诞雪橇
阿辉2
2015-12-15 21:20
我想知道为什么当图片的大小超出父容器时；background-position设置的百分比值是乱的（或者说反的，百分比值也没有规则了），而案列中却刚好又还可以用。正常来说background-position的百分比的正值是图片向右移动，负值反之。当图片超出容器大小时，百分比正值向左移动，负值反之，而且图片的百分比长度值变了（貌似变小了）。
写回答
关注
5回答
-
- 狂飙的蜗牛_1
- 2015-12-15 21:38:30
当background-position以百分比来定义时,例如：
background-position：50% -30%；
意思是：
x：（容器的宽度-图片的宽度）x 50%
y：（容器的高度-图片的高度）x（-30%）
-
- zhongkeyuan
- 2016-06-10 07:27:12
100% {
background-position: -300% 100%;
这个-300%怎么理解啊？
按照x：（容器的宽度-图片的宽度）x -300% =9*容器宽度啊，
而图片宽度=4*容器宽度。
这是怎么弄？
-
- echo_kinchao
- 2015-12-16 11:55:28
background-position 你可以通过这个来设置
-
- 阿辉2
- 2015-12-16 01:26:39
你回答的很对啊，我花了一个多小时在一点一点测试，还是把负值百分比理解成相对图片自身的长度（这是错的），现在才看到你的追答，恍然大悟。wsschoool里没有介绍的这么详细，所以我一直没搞明白。真是感谢你啊，我加你为好友啊，以后多指教。
-
- 阿辉2
- 2015-12-15 21:56:50
这个我知道，我说的是图片超出容器是，正负百分比方向反向的问题
H5+JS+CSS3 实现圣诞情缘
为圣诞节准备的H5+JS+CSS特效案例教程，实现静与动的结合
122015 学习 · 211 问题
相似问题