Question

CSS定位百分比计算的一个小疑问？

第一张是背景图片，是四个边长为100px的方块叠在一起的。

请问怎样才能将其横过来，做成下面这种效果。

用background: #F3F2E2 url(1234.png) no-repeat;第二个box的background-position定位y左边为什么是33.333333%（即background-position:0% 33.33333%;），这里怎么不是25%呢？





Answer 1

Position的百分比，与放他的容器大小有关

你的是 100 * 400 的啥

那么 y = 400(图高) - 100(容器高) = 300 * 33.3% = 100

如果容器 非常大 比如 800 

那么 y = 400 - 800 = -400 * - 25% = 100，因此你设置你的position：0 -25%

希望能帮到你

追问

亲，感谢你的回答。但是33%是通过计算得出的，你要怎样计算是y=33%呢，希望能够得到你的详细解答，谢谢。

Answer 2

给它绝对值别100分比，，因为你1234.png上面的色块都是固定宽高的。

Answer 3

用ul去写会比较好，ul、li

Answer 4

用背景截图