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

基础知识

MDN background-size

验证

测试demo地址

该测试demo 托管于github,打开速度可能较慢，会出现一段时间空白，请耐心等待

或者 下载git源码

[1] : https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
[2] : https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position
[3] : https://github.com/spiritlc/Influence-of-background-size-on-background-position