宽高使用min()函数时background-position的计算问题

问题原因 #

• 核心原因是当前绝大多数浏览器不支持直接在min()/max()/clamp()等CSS比较函数前直接加负号，你写的-min(10vw, 10vh)属于不合法的CSS语法，会被浏览器直接忽略，因此background-position回退到了默认值0% 0%，和你写0px 0px的效果完全一致。
• 你当前代码里background简写属性写在background-position、background-size之前，顺序正确，不会触发属性覆盖问题。

解决方法 #

方案1：修正min()负值的写法 #

用calc()包裹负运算即可正常识别，修改后的完整代码如下：

<div style="background: url(images/touchbuttons.png); width: min(10vw, 10vh); height: min(10vw, 10vh); background-position: calc(-1 * min(10vw, 10vh)) 0; background-size: 700% 200%;" >
</div>

方案2：用百分比定位替代长度值定位（更易维护） #

因为你雪碧图横向有7个图标、background-size设置为700%，对应横向第n个图标（从1开始计数）的background-position-x值为calc(100% / (7 - 1) * (n - 1))，第二个图标对应的值约为16.666%，不需要嵌套min()运算，兼容性更好：

<div style="background: url(images/touchbuttons.png); width: min(10vw, 10vh); height: min(10vw, 10vh); background-position: 16.666% 0; background-size: 700% 200%;" >
</div>

内容的提问来源于stack exchange，提问作者Rewind