@[TOC](部分情况下 background-size 导致 background-position 失效)
结论
一、background-size 设置为 contain/cover 的情况下，会导致background-position 设置的百分比失效
background-size 设置为100% 的方向上 background-position 设置的百分比失效
具体表现如下 1.容器 和 背景图片 的尺寸宽高比不同的情况下 ①.background-size 设置 contain 导致 图片较长方向的 百分比失效,如果背景图片是正方形，则 x 轴方向的百分比失效 ②.background-size 设置 cover 导致 图片较短方向的 百分比失效，如果背景图片是正方形，则 y 轴方向的百分比失效
2.容器 和 背景图片 的尺寸宽高比相同的情况下 background-size 设置 cover/contain 导致 图片两个方向的 百分比 都失效
引申结论, 暂时没有在官方找到论证依据，仅推理获得 背景图片在正方形的情况下，会将横向作为长边 background-size: contain <=> background-size: 100% auto background-size: cover <=> background-size: auto 100%
原理
根据 MDN 中background-position 指定百分比的原理
设置的百分比最后的表现为 (容器的 宽/高 - 背景图片的 宽/高) * 百分比
所以如果 背景图片尺寸 和 容器尺寸一致的情况下，会出现该方向background-position 百分比失效
既 background-size 设置为100% 的方向上 background-position 设置的百分比失效
起因
在个人项目中给一个元素设置背景图片，发现 background-size 会影响 background-position
基础知识
验证
该测试demo 托管于github,打开速度可能较慢，会出现一段时间空白，请耐心等待
或者 下载git源码
[1] : developer.mozilla.org/zh-CN/docs/… [2] : developer.mozilla.org/zh-CN/docs/… [3] : github.com/spiritlc/In…
