结论
一、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] : 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