版权声明：QAQ https://blog.csdn.net/mineblogjw/article/details/81669976
最近再写公司官网，要求响应式，为了图方便用百分比遇到一个bug。
经过多方测试，此时遇到的问题是：当background-size的值与容器的width、height值相同时（同为px或者%），background-postion属性值设置为百分之无效。为此做了一个demo更为直观的理解这种问题：
造成这个问题的原理就是因为background-postion的值使用百分比时的计算公式：
x=(容器width - 背景size width) * 百分比； y=(容器height - 背景size height) * 百分比。
可以看到在background-postion设置成百分比无效果的几个例子中（A C），background-size无论是px或是%，只要跟容器宽高相同，定位就没有作用。（D）同样是设置成百分比，但是size的y轴值是250px，所以90%的y轴定位值通过计算就是（300-250）*90%=45px。（B E）虽然size设置的跟容器宽高一样，但是postion值为px。。不需要计算。。所以倒是没有问题。
结论：不管是px还是%，容器宽高跟背景图宽高相同之后相减怎么都为0，乘以多少都是0，所以background-postion值为百分比无效的原因是因为background-size属性值的原因。
解决方案就是。。不用背景定位了，写成多层html嵌套来实现了。或者使用 background-origin:padding-box / content-box;用padding属性来打成定位效果（这个感觉还是要算来算去。。不推荐）。